Jquery append and remove li element attach issues

Question

Mouse hover works at first, but when I click remove button and attach it is not working with mouse hover handler?? why?

thanks.

HTML:

<div id="container">
<button id="a">remove</button><button id="b">attach</button>
<ul>
</ul>
</div>

JS:

    var k = 10; 
        myfunction(k);  
            $('#a').click(function(){   
                $('ul li').remove();    
            });         
            $('#b').click(function(){               
                k = 20;
                myfunction(k);          
            });     
            $('ul li').on('mouseenter',function () {
                var num = $(this).index();
                $('#lit' + num).addClass('currentpage');
                $('#lit' + num).siblings().removeClass('currentpage');
                });

function myfunction(p){
    for(var i=0;i<p;i++){
        $('#container ul').append('<li id=lit'+i+'>Hello'+i+'</li>');
    }
}

Demo: http://jsfiddle.net/JasonHu/8B9VH/5/

and [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/q/12829963/218196) — Felix Kling, Feb 10 '14 at 03:31

Felix · Answer 1 · 2014-02-10T03:06:24.987

1

You need to use event delegation so that the mouseenter event can be attached to the newly added list item:

$('#container').on('mouseenter','ul li', function() {

});

Updated Fiddle

edited Feb 10 '14 at 03:06

answered Feb 10 '14 at 03:01

Felix

37,892
8
43
55

It might be helpful to explain why - when the selector `ul li` is executed for the mouseenter handler, it will only find the current `
`s inside the `

GregL

Feb 10 '14 at 03:05

score 0 · Answer 2 · answered Feb 10 '14 at 03:08

You need to separate the function of binding the list and call it again after you generated a new list.

function BindMyList() {
        $('ul li').unbind('on');
        $('ul li').on('mouseenter', function () {
            var num = $(this).index();
            $('#lit' + num).addClass('currentpage');
            $('#lit' + num).siblings().removeClass('currentpage');
        });
    }

Updated Fiddle

score 0 · Accepted Answer · answered Feb 10 '14 at 03:08

Straight forward logic my friend:li elements to which you have attached mouseenter handler have been removed. Newly inserted li elements don't get mouseenter handler unless you attach them again after you insert them. In myfunction you have to attach mouseenter handlers for the newly inserted li elements. Change your code as shown below. Note the change - move the mouseenter handler attaching code inside myfunction.

var k = 10; 
myfunction(k);  
$('#a').click(function(){   
    $('ul li').remove();    
});         
$('#b').click(function(){               
    k = 20;
    myfunction(k);          
});

function myfunction(p){
    for(var i=0;i<p;i++){
        $('#container ul').append('<li id=lit'+i+'>Hello'+i+'</li>');
    }
    //Attach mouseenter handler after appending the li elements.
    $('ul li').on('mouseenter',function () {
        var num = $(this).index();
        $('#lit' + num).addClass('currentpage');
        $('#lit' + num).siblings().removeClass('currentpage');
    });
}

Jquery append and remove li element attach issues

3 Answers3