jQuery和淘汰赛一起玩不好答案

【问题标题】：jQuery and knockout playing bad togetherjQuery和淘汰赛一起玩不好
【发布时间】：2013-05-21 13:36:12
【问题描述】：

考虑一下

<ul data-bind="foreach: items">
    <li class="popupClick" data-bind="text: name"></li>
</ul>

$(document).ready(function() {
    $('.popupClick').click(function() {
        alert('Show popup');
    });
});

当页面加载时，单击li 会显示警报。但是如果 observableArray items 被更改并且新的li-nodes 被附加到节点，我们不能点击它们。

每次更改items 时，我们都需要重新运行上面的javascript 代码吗？有什么好方法吗？

我不想在这里使用data-bind="click: ..." 事件，因为这个点击实际上并不是 ViewModel 的一部分，而且我们有很多遗留的 jQuery 东西，它们为弹出窗口、工具提示等注册像这样的点击处理程序。

谢谢！

【问题讨论】：

为什么不使用淘汰赛click绑定？

标签： jquery knockout.js

【解决方案1】：

您需要更新您的 jQuery 代码以使用 on() 方法。可以在这里找到文档http://api.jquery.com/on/

原来如此；

$(document).ready(function() {
    $(document).on('click', '.popupClick', function() {
        alert('Show popup');
    });
});

您需要这样做，因为在您的代码中，分配点击事件时元素不存在。

事件处理程序仅绑定到当前选定的元素；在您的代码调用时它们必须存在于页面上

更进一步，你可以给你的包装 <ul> 一个 ID 或类名，然后附加 on() 方法到它。例如

更新的 HTML

<ul id="myItems" data-bind="foreach: items">
    <li class="popupClick" data-bind="text: name"></li>
</ul>

更新 JS

$('#myItems').on('click', '.popupClick', function(){
    alert("Show popup");
});

【讨论】：

谢谢！使用文档作为委托事件的容器而不是 ul 元素对性能有影响吗？
网上有很多关于性能计数器的博文，不知道是准确的还是过时的。建议绑定到最接近的静态元素是最快的。这样它就不会在整个 DOM 中搜索元素，而只会在 closes 静态元素中搜索。

【解决方案2】：

对于新添加的元素，您需要使用委托事件处理程序

$(document).on('click','.popupClick', function() {
    alert('Show popup');
});

查看on官方文档了解更多详情

【讨论】：

我唯一遇到的问题是它强制扫描整个 DOM。 OP 应该记住的一点是，如果他们可以将该选择器缩小到更接近上下文的范围，或者监视整个 DOM 树的点击事件，如果我了解它是如何正常工作的，那就更好了。显然，由于我们不知道 OP 的其余代码是什么样的，所以我们不能说 /where/ 来放置那个选择器，但是离 DOM 树中的目标元素越近越好。除非我完全偏离基础，在这里，我很乐意得到纠正，因为它会大大简化我自己的代码！ :)
@mori57：同意尽可能使用更亲近的父母。

【解决方案3】：

您应该考虑使用 jQuery on() 方法将事件绑定到动态生成的对象。

【讨论】：