Question

鼠标悬停首先工作，但当我单击删除按钮并附加它不能使用鼠标悬停处理程序？为什么呢？

感谢。

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>');
    }
}

演示： http://jsfiddle.net/JasonHu/8B9VH/5/

Answer 1

您需要使用event delegation，以便mouseenter事件可以附加到新添加的列表项：

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

});

<强> Updated Fiddle

Answer 2

您需要分离绑定列表的功能，并在生成新列表后再次调用它。

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

Answer 3

直接向前逻辑我的朋友：li已附加mouseenter处理程序的元素已被删除。新插入的li元素不会获得mouseenter处理程序，除非您在插入它们后再次附加它们。在myfunction中，您必须为新插入的mouseenter元素附加li个处理程序。更改您的代码，如下所示。请注意更改 - 移动mouseenter处理程序附加代码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追加并删除li元素附加问题

3 个答案: