使用 jQuery ajax 动态添加 <tr> 时，单击事件不起作用答案

【问题标题】：Click event is not working when <tr> added dynamically using jQuery ajax使用 jQuery ajax 动态添加 <tr> 时，单击事件不起作用
【发布时间】：2016-05-02 13:55:12
【问题描述】：

jQuery 的单击事件不起作用。在 ajax 中，我动态添加了一个表格行，其中包含一个带有 btn btn-default getEditCategory 类的按钮。它不工作。

这是我动态添加表格行的ajax成功函数

var addCatUrl = $("#addCategories").attr('action');

success: function(data) {
    if(data) {
        var data = $.parseJSON(data);
        if(data.status === true) {
            var ajxMsg = data.message;
            var categoryList = data.data;
            var html = " ";
            var sr = 0;
            $.each(categoryList, function(key, category) {
                sr++;
                if(category.status == 1) { 
                    var statusHtml = "<span class='label label-success catActive'>Active</span>";
                } else {
                    var statusHtml = "<span class='label label-danger catInActive'>InActive</span>";
                }

                html += "<tr><td>"+sr+"</td><td>"+category.name+"</td><td>"+statusHtml+"</td><td>"+category.creationDate+"</td><td><span><button class='btn btn-default getEditCategory' id='getEditCategory' data-id='"+category.id+"' type='button' data-toggle='modal' data-target='#editCategoryModal'><i class='fa fa-pencil' aria-hidden='true'></i></button></span><span><button class='btn btn-default deleteCategory' id='deleteCategory' data-id='"+category.id+"' type='button'><i class='fa fa-trash' aria-hidden='true'></i></button></span></td></tr>";
            });
            $("#categoryList").append(html);
        }   
    }
}

这是我的点击事件，它不起作用

$("button.btn btn-default deleteCategory").click(function(){
    alert("Delete coming soon..");
});

【问题讨论】：

标签： jquery ajax

【解决方案1】：

试试这个：

$('#categoryList').on('click', 'button.deleteCategory', function(){
   alert("Delete coming soon..");
});

在这里，我们将click 事件绑定到#categoryList 元素上，并仅过滤掉button.deleteCategory 元素上的事件。这样，您将事件绑定到现有的 tr 还是新创建的都没有关系。

【讨论】：

【解决方案2】：

事件在 DOM 启动时绑定，但您的元素不会出现。您可以使用以下代码来执行此操作。

jQuery(document).on('click', "button.deleteCategory",
    function () {
       alert("Delete coming soon..");
    })

【讨论】：

【解决方案3】：

我还没有看到处理您所说的事件的代码，但是如果您还没有使用过事件委托，请使用它，或者如果您根本不知道它，请进行一些研究

代替

$('.my-table-row').click(function(){
  ///some code here
  
  
  });

做类似的事情

$('#my-table').on('click','.my-table-row', function(){
  //Some code here
  
  
  });

您可以用任何静态元素（如文档本身）替换 #my-table

【讨论】：

【解决方案4】：

动态元素需要使用event delegation。你的选择器也是错误的。尝试如下。

$("#categoryList").on('click', '.deleteCategory', function () {
    alert("Delete coming soon..");
});

注意：您正在复制 ID getEditCategory 和 deleteCategory。您不需要使用这些 id，因为也有类。

【讨论】：