Question

我有一组从数据库中显示的记录：

<tr>
  <td>Full Name</td>
  <td><a class="remove-user" href="/remove-user/6/">remove</a></td>
</tr>

我可以删除它们（非动态）并在执行此操作前显示确认对话框：

$('a.remove-user').on('click', function(){
    return confirm("Are you sure you want to remove this user?");
});

但是，当我通过ajax添加动态行时 - 我无法在之后显示确认对话框：

$('#user_add_final').submit(function(event){
    event.preventDefault();
    var values = $(this).serialize();
        $.ajax({
          url: "/ajax/user/",
          type: "post",
          data: values,
          success: function(response){
               json = jQuery.parseJSON(response);
               $('.users tr:last').after("<tr><td>"+json.user.fullname+"</td><td><a class=\"remove-user\" href=\"/action/remove-user/"+json.user.userid+"/\">remove</a></td></tr>");
          },
          error:function(){
              alert(failure);
          }   
    }); 
});

有人可以帮我解决这个问题吗？

Answer 1

您可以尝试以下方式：

$('table').on('click', 'a.remove-user', function(){
    return confirm("Are you sure you want to remove this user?");
});

使用事件委托。

Answer 2

您需要委派您的活动，因为在加载脚本时新添加的行不存在。

$('.users').on('click', 'a.remove-user', function(){
    return confirm("Are you sure you want to remove this user?");
});

Answer 3

因为您还没有绑定事后添加的记录的点击事件。看看你的处理程序：

$('a.remove-user').on('click', function(){
    return confirm("Are you sure you want to remove this user?");
});

标识元素的部分：

$('a.remove-user').on(...

当页面加载时，

执行一次。因此，它只能识别页面加载时存在的匹配元素。处理程序附加到元素，而不是选择器。因此，当页面加载时不存在的任何元素都不会被此代码识别。

但是，您可以使用.on()的重载将处理程序附加到常见的不变的父元素，并从子元素中过滤。它看起来像这样：

$(document).on('click', 'a.remove-user', function(){ return confirm("Are you sure you want to remove this user?"); });

这实际上将处理程序附加到document（它不会通过AJAX更改）并在文档中的任何位置运行任何单击，但每次只对第二个选择器进行过滤以仅响应匹配的元素那个选择器。这样，文档生命后期添加的元素仍然被捕获。

您不需要使用document，任何常见的父元素都可以使用。该表格包含div等

我已经写了更多关于这个here的信息。

删除动态添加的记录（ajax）

3 个答案: