Question

我一直在尝试在这段代码上使用jQuery，但它没有响应。我动态地尝试在HTML表的末尾添加一些行，并且还包括一个取消按钮。取消按钮上的单击功能似乎不起作用。

我无法在此处发布完整代码，因此我添加了jsFiddle的链接。

JavaScript代码的一部分：

$('#myTable tbody:last').after('<tbody class="newrow"><tr><td> <input  type="text" class="app"></td><td><input type="text" class="env"> |\n\
 </td><td><input type="text" class="region"> | </td><td><input type="text"  class="url"> | \n\
</td><td><button class="cancel">X</button></td>\n\
</tr></tbody>');          
}

$('.cancel').on('click', function() {
    alert();
   //$(this).closest('tbody').fadeOut(2000); 
});

Answer 1

您需要使用委托事件来捕获dinamycally添加元素的点击事件。

实施评论中建议的更改后，将您的点击处理程序更改为此

sbt.ResolveException: unresolved dependency: org.scalaz.stream#scalaz-stream_2.11;0.7a: not found

这将在浏览器控制台输出，已点击的按钮，它也应该对新元素起作用。

Answer 2

为每个取消对象

创建唯一的类

<button class="cancel' + counter + '">X</button>

然后启动触发器，完整解决方案：

     var counter = 0;//specify counter variable to create unique cancel class
     $('.addfinal').click(function(){   
          n=$('.addno').val();
          for(var i=0;i<n;i++){

         $('#myTable tbody:last').after('<tbody class="newrow"><tr><td><input type="text" class="app"></td><td><input type="text" class="env"> |\n\                  </td><td><input type="text" class="region"> | </td><td><input type="text"      class="url"> | \n\</td><td><button class="cancel' + counter + '">X</button></td>\n\</tr></tbody>');
     } 


            cancel($(".cancel"+counter))
            counter++;
     });
});

当您为取消类启动click事件时，该类仍然不存在，尝试将其包装在函数中并为您将使用该行创建的每个取消obj附加此click事件，您的取消对象将具有由于计数器变量（参见上文），现在可以使用唯一ID。

function cancel($obj){
    $obj.on('click', function() {
         console.log($(this).closest('tbody'))
         $(this).closest('tbody').fadeOut(2000); 
    });
}

jQuery点击事件不适用于动态添加的元素

2 个答案: