jquery - 使用 jQuery ajax 动态添加 时，单击事件不起作用

Question

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..");
});

Answer 1

试试这个:

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

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