Question

考虑一下

<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 - 节点被附加到节点，我们就无法点击'em。

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

我不想在这里使用data-bind="click: ..."事件，因为这个点击实际上不是ViewModel的一部分，我们有很多遗留的jQuery内容，可以为弹出窗口，工具提示等注册这样的点击处理程序。 / p>

谢谢！

Answer 1

您需要更新jQuery代码才能使用on()方法。可在此处找到文档http://api.jquery.com/on/

所以它会是;

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

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

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

为了更进一步，您可以为您的包裹<ul>提供ID或类名，然后将on()方法附加到此。 e.g。

更新了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");
});

Answer 2

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

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

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

Answer 3

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

jQuery和淘汰赛一起打得不好

3 个答案: