1

这是真的吗？

<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 调用获得列表，则它不起作用。为什么？

4

5 回答 5

3

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

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

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

于 2013-09-11T06:18:12.843 回答
2

事件委托

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

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

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

所以试试

$(document).on('click', '#reset', function() {
    // Your code
});
于 2013-09-11T06:21:17.310 回答
2

使用.on()。

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

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

一个简短的解释可以是：

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

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

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

于 2013-09-11T06:18:32.893 回答
1

您应该使用以下on方法：

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

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

于 2013-09-11T06:19:12.067 回答
1

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

$(document.body).on('click', '#reset', function() {
   alert("hi");
});
于 2013-09-11T06:19:37.643 回答