jQuery和淘汰赛一起打得不好

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-nodes被附加到节点,我们就无法单击它们.

我们需要在每次items更改时重新运行上面的javascript代码吗？这样做的一些好方法？

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

谢谢!

Answer 1

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

所以它会;

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

您需要这样做,因为在您的代码中,在分配click事件时元素不存在.

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

为了更进一步,您可以为您的包装<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");
});