Question

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

问题在于每当我返回部分视图（虚拟分页，返回更多行，过滤记录或排序）时，点击事件都不再有效。

这是我的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;
        });

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

任何帮助将不胜感激。

Answer 1

您需要委派活动

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

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

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

Answer 2

我找到了一个解决方案：

试着做：

$(document).on("click", "YOUR_SELECTOR", function(e){
  /// Do some stuff ...
});

而不是：

$("YOUR_SELECTOR").on("click", function(e){
  /// Do some stuff ...
});

部分视图MVC Jquery不起作用

2 个答案: