jquery - 部分 View MVC Jquery 不工作

Question

我有一张 table 。我正在返回一个行列表，在其中一行中我有一个按钮。这个按钮有一个叫做“密码”的类。我在这个类上附加了一个点击事件。每次用户单击此按钮时，我都会执行 ajax 调用并从服务器获取密码并将其显示在单元格中...

问题是每当我返回局部 View (虚拟分页，返回更多行，或过滤记录，或排序)时，点击事件不再有效。

这是我的javascript

 $('.password').click(function () {
            var self = $(this);
            var accountID = $(this).attr('data-id');
            var route = {
                serverAction: 'GetDecryptedPassword',
                args: {
                    ID: accountID
                }
            };

            App.getJSON(self, route, function (sender, data) {
                $("#" + accountID).html(data);
            });

            return false;
        });

我猜一旦部分 View 刷新了元素，处理程序就不再附加。是否需要重新连接？

如有任何帮助，我们将不胜感激。

Answer 1

您需要委派事件

$(staticContainer).on('click', '.password', function () {

当脚本加载时，事件总是附加到页面上的元素。因此，当您使用 Ajax 获取其他行时，这些行仍然不存在。

因此事件不受这些元素的约束。因此，如果您将事件委托(delegate)给静态容器，您基本上是在监听该容器上的事件，当点击事件发生时，该事件将冒泡到父级并触发该事件。