3

考虑这个

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

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

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

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

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

谢谢！

4

3 回答 3

5

您将需要更新您的 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");
});
于 2013-05-21T13:38:54.983 回答
3

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

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

查看on官方文档以获取更多详细信息

于 2013-05-21T13:38:47.003 回答
0

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

于 2013-05-21T13:38:40.573 回答