3

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

单击 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 元素？

提前致谢！

4

6 回答 6

7

.click()不是实时处理程序，仅将事件绑定到执行时存在于 DOM 中的元素。如果您希望事件是实时的，您需要查看另一个处理程序，例如.on()

于 2012-04-10T13:33:25.360 回答
7

当您使用事件快捷方式（例如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 应该是唯一的。如果您想拥有组标识符，请改用类。

于 2012-04-10T13:34:56.133 回答
1

当您调用 ("li").click() 时，您将事件绑定到现有的 li 元素。当您创建新的 li 元素时，您需要将它们绑定到事件以便单击工作。

所以，把你的循环改成更像这样的东西......

 $.each(data, function(i, item) {
    var li = $('li').text(item.Description);
    $(li).click(function(e) {  loadChildren(this); });
    $("#ResultsHolder").append(li);
});
于 2012-04-10T13:32:44.980 回答
0

添加到页面的“li”元素没有将函数绑定到其单击事件处理程序。您需要使用 jQuery live() 函数来执行此操作。

http://api.jquery.com/live/

基本上而不是 .click(function(){}) 你需要做 .live("click",function(){})

于 2012-04-10T13:34:53.133 回答
0

使用.delegate()：$(document).delegate("li","click",function(){...})

或者，较新的版本，.on() $('li').on("click",function(){...})

document如果您的 li 在某个固定的 div 中，您可以通过将第一个片段替换为该 div 的选择器来使其更快；做第二个$(SELECTOR).on("click","li",function(){...})

于 2012-04-10T13:36:58.243 回答
0

因为将 .click 功能绑定到所有 li 是在创建这个新的之前发生的。JQuery 有 .on() 函数，可以解决你的问题。

$("li").on("click", function(event){
// do functionality
});
于 2012-04-10T13:37:55.090 回答