jQuery可以应用于jQuery生成的内容吗？

Question

我不知道为什么这不起作用.

当单击li元素时,我调用一个PHP文件来获取一些结果并将其打印在我的页面中.到现在为止还挺好.

$("li").click(function(){

            var item = $(this).html();
            $.getJSON('fSearch.php',{sTerm: item}, function(data){
                var results='';

                $.each(data, function(i, item) {
                    results += "<li id='t'>"+item.Description+"</li>";

                });
               $('#ResultsHolder').html("<ul>"+results+"</ul>");

            });

        });

我第一次点击一个li元素一切正常,我得到了结果.现在这些结果是另一组li,我希望它们的行为相同,但是当我点击生成的li时,函数不会被执行..

为什么会这样？为什么jQuery无法识别动态插入的li元素？

提前致谢!

Answer 1

.click()不是活动处理程序,只是将事件绑定到执行时存在于DOM中的元素.如果你想让事件生效,你需要查看另一个处理程序,例如.on()

Answer 2

当您使用事件快捷方式(例如click,或hover)时,它仅适用于页面加载时DOM可用的事件.在动态追加元素时,需要将事件侦听器委托给页面中始终可用的元素.

在下面的例子中,我使用过#ResultsHolder.

$("#ResultsHolder").on("click", "li", function(){
    var item = $(this).html();
    $.getJSON('fSearch.php',{sTerm: item}, function(data){
        var results='';
        $.each(data, function(i, item) {
            results += "<li id='t'>"+item.Description+"</li>";
        });
        $('#ResultsHolder').html("<ul>"+results+"</ul>");
    });
});

这应该适用于jQuery 1.7+.对于旧版本的jQuery,请使用delegate()...

$("#ResultsHolder").delegate("li", "click", function(){ ...

此外,所有附加li元素都具有id't'.这将导致无效代码,因为ID应该是唯一的.如果您想拥有组标识符,请使用类.