Question

是真的吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script>
    $(document).ready(function(){
        $("#reset").click(function(){alert("hi");});
    });
</script>

<ul>
    <li id="reset">Reset</li>
</ul>

上面的代码工作正常。但是，如果我通过Ajax调用得到列表它不起作用。为什么呢？

Answer 1

不，这不是真的。您需要对动态生成的内容使用on方法：

$(document.body).on('click', '#reset' ,function(){
    alert("hi");
});

使用on，您可以通过在DOM中已存在的父元素上注册事件来使用事件委派。动态添加的元素中的事件将冒泡到您注册的事件，并且仅当事件的实际目标与您传入的选择器匹配时才会调用处理程序。

Answer 2

使用.on()。

当您动态创建元素时，无法直接处理它们，因此您必须使用.on()：

$(document.body).on('click', '#reset' ,function(){
    alert("hi");
});

简要说明可以是：

当您使用普通事件注册模型时，它会将处理程序直接注册到目标，这些处理程序在处理程序注册执行时存在于DOM中。因此，动态添加的元素将不会获得这些处理程序。

解决方法是使用事件委派。在此模型中，处理程序注册到祖先元素，当页面加载了选择器以过滤掉源元素时，该元素将出现。这利用了事件传播 - 元素中发生的事件传播到所有祖先元素（像焦点事件这样的例外）。因此，元素中发生的事件会传播到其中一个元素中的祖先元素，处理器被注册，然后事件源元素（event.target）及其祖先与作为第二个参数传递的选择器匹配，如果满足则处理程序已执行。

http://api.jquery.com/on/#direct-and-delegated-events

Answer 3

活动委派

当您使用普通事件注册模型时，它会将处理程序直接注册到目标，这些处理程序在处理程序注册执行时存在于DOM中。因此，动态添加的元素将不会获得这些处理程序。

解决方法是使用事件委派。在此模型中，处理程序注册到祖先元素，当页面加载了选择器以过滤掉源元素时，该元素将出现。这利用了事件传播 - 元素中发生的事件传播到所有祖先元素（像焦点事件这样的例外）。因此，元素中发生的事件会传播到其中一个元素中的祖先元素，然后处理事件源元素（event.target），并且其祖先与作为第二个参数传递的选择器匹配（如果满足）然后执行处理程序。

http://api.jquery.com/on/#direct-and-delegated-events

所以试试

$(document).on('click', '#reset', function() {
    // Your code
});

Answer 4

您应该使用on method：

$(document.body).on('click', '#reset', function() {
   alert("hi");
});

第一个选择器必须是一个不会被替换的元素。这样，当事件冒泡到此时就会被捕获。然后，您将指定将触发事件的实际元素作为.on

的第二个参数

Answer 5

作为未在onLoad阶段准备的DOM，您需要使用on进行绑定，如

$(document.body).on('click', '#reset', function() {
   alert("hi");
});

jQuery不能与通过Ajax请求发送的id一起使用吗？

5 个答案: