Javascript jQuery事件未在动态创建的元素上触发

我的问题来了。。

/*我正在使用ajax动态创建表*/

 $(".n").click(function(){
      var id= $(this).closest('tr').find('td.ide2').html();

         //for displaying the table
         $.ajax({
           type: 'POST',
           url: '<?php echo base_url(); ?>Admin/show', //We are going to make the request to the method "list_dropdown" in the match controller
           dataType:'json',
           data: {'id':id}, //POST parameter to be sent with the tournament id
           success: function(resp) { 

             for(var i=0;i<(resp.length);i++)
              {
                var row = $('<tr></tr>').appendTo($("#unique-list"));

                $('<td />',{text:resp[i]}).appendTo(row);
                $('<td class="off-del glyphicon glyphicon-minus"></td>').appendTo(row);  

             }//end for loop
            } //end success
            });  //end ajax




          $(".off-del").click(function(){
          alert('hello');
          var id= $(this).closest('tr').find($(":first-child")).html();
          console.log(id);
          });
        });

$（“.n”）。单击（函数（）{
var id=$（this.nexist（'tr'）.find（'td.ide2'）.html（）；
//用于显示表格
$.ajax({
键入：“POST”，
url:'Admin/show'，//我们将向match controller中的方法“list\u dropdown”发出请求
数据类型：'json'，
数据：{'id'：id}，//POST参数将与比赛id一起发送
成功：功能（resp）{
对于（var i=0；i，当您在jQuery中设置如下事件处理程序时：

      $(".off-del").click(function(){
        alert('hello');
        var id= $(this).closest('tr').find($(":first-child")).html();
        console.log(id);
      });

您告诉它立即在文档中找到类为“off del”的元素。您的ajax操作将添加此类元素，但只有在您尝试设置处理程序后才会发生

相反，您可以在文档对象上设置处理程序并利用事件冒泡：

$(document).on("click", ".off-del", function() {
      alert('hello');
      var id= $(this).closest('tr').find($(":first-child")).html();
      console.log(id);
});

您可以随时以这种方式设置事件处理程序，它将随时处理添加的任何“.off del”元素的单击。
在jQuery中设置事件处理程序时，如下所示：

      $(".off-del").click(function(){
        alert('hello');
        var id= $(this).closest('tr').find($(":first-child")).html();
        console.log(id);
      });

您告诉它立即在文档中找到类为“off del”的元素。您的ajax操作将添加此类元素，但只有在您尝试设置处理程序后才会发生

相反，您可以在文档对象上设置处理程序并利用事件冒泡：

$(document).on("click", ".off-del", function() {
      alert('hello');
      var id= $(this).closest('tr').find($(":first-child")).html();
      console.log(id);
});

您可以随时以这种方式设置事件处理程序，它将随时处理添加的任何“.off del”元素的单击。
Ajax调用是异步的

在通过ajax追加元素之前，单击处理程序将被注册，它找不到具有
$（“.off del”）
的元素

您可能应该使用

$(document).on('click','.off-del',function(){
    alert('hello');
    var id= $(this).closest('tr').find($(":first-child")).html();
    console.log(id);
});

您可以使用静态父级而不是
$（document）
。
Ajax调用是异步的

在通过ajax追加元素之前，单击处理程序将被注册，它找不到具有
$（“.off del”）
的元素

您可能应该使用

$(document).on('click','.off-del',function(){
    alert('hello');
    var id= $(this).closest('tr').find($(":first-child")).html();
    console.log(id);
});

您可以使用静态父对象，而不是
$（文档）
。
您面临这个问题，因为在动态创建html之后，您还应该加载将其绑定到新创建html的事件

因此，为事件创建一个函数，并在动态创建html之后调用该函数。
您面临这个问题，因为在动态创建html之后，您还应该加载该事件，该事件将绑定到新创建的html

因此，为事件创建一个函数，并在动态创建html后调用该函数。
虽然您可以使用事件委派进行此操作，但也可以在附加所有html后注册处理程序（在
成功
回调中）

for（var i=0；i虽然您可以使用事件委托-您也可以在附加所有HTML后注册处理程序（在
success
回调中）

for（var i=0；iuse事件委派使用事件委派