jQuery events are only binding once

Question

I have mouseover and mouseout events that I want to be binded all the time. i.e. if I mouseover an element, then mouseout, then mouseover, and so on, these event handlers should still trigger. How should I fix this? Right now they are only binding once....

    $welcome = $("#welcome");
    $welcomeClone = $("#welcome").clone();

    $welcome.mouseover(function() {
        $welcome.css("height","400px");
    });

    $welcome.mouseout(function() {
        $welcome.hide();
        $("#vertical-center").append($welcomeClone)
    });

You mean you're newly appended clone of $welcome doesnt have any events.. — tymeJV
– tymeJV, Commented Jun 6, 2014 at 21:29

tymeJV · Accepted Answer · 2014-06-06 21:30:45Z

1

The reason is because each mouseout you hide the $welcome element - then append a clone of it to #vertical-center - that cloned element doesnt have the same event handlers. You should use event delegation:

$welcome = $("#welcome");
$welcomeClone = $("#welcome").clone();

$("#vertical-center").on("mouseover", "#welcome", function() {
    $(this).css("height", "400px");
}).on("mouseout", function() {
    $(this).hide();
    $("#vertical-center").append($welcomeClone)
});

answered Jun 6, 2014 at 21:30

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery events are only binding once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related