Question

jQuery的Click事件无法正常工作。在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..");
});

在这里，我们在click元素上绑定#categoryList事件，并仅过滤button.deleteCategory元素上的事件。这样，将事件绑定在现有tr或新创建的<。p>上无关紧要

Answer 2

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

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

Answer 3

我还没有看到处理你正在谈论的事件的代码，但如果你没有使用事件委托，使用它或者如果你根本不知道它做了一些研究

而不是

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

做类似

的事情

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

你可以用文件本身

之类的任何静态元素替换#my-table

Answer 4

您需要将event delegation用于动态元素。你的选择器也错了。尝试以下。

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

N.B：您正在复制ID getEditCategory和deleteCategory。您不需要使用这些ID，因为还有类。

使用jQuery ajax动态添加时，Click事件无效

4 个答案: