如何对动态生成的按钮单击做出反应？

Question

我用以下代码添加按钮：

$('.dishes').prepend($('<div class="row" data-dishid="'+dishid+'"><div class="col-md-8">'+dishname+'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>'));

但是以下代码无法捕获按钮单击（如果它是静态html的一部分，则可以使用相同的代码）：

$("button.close").click(function() {
      var row = $(this).closest('.row');
      var dishid = row.attr('data-dishid');      
});

我该如何解决？

请参阅示例代码 。

Answer 1

对于动态创建的元素，应使用.on('click', selector, callback)

喜欢

$(document).on("click", "button.close", function() {
  var row = $(this).closest('.row');
  var dishid = row.attr('data-dishid');      
});

Answer 2

您需要事件委托来动态生成元素。 像下面一样尝试。

$(document).on('click', "button.close", function () {
    var row = $(this).closest('.row');
    var dishid = row.attr('data-dishid');
    console.log(dishid);
});

工作演示

Answer 3

我已经看到了代码。 您必须在附加元素之后立即调用动态元素的click函数。 试试下面的代码。

$("#add").on('click', function() {
    $('.dishes').prepend($('<div class="row" data-dishid="'+ "test" +'"><div class="col-md-8">'+ " test " +'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>'));
    $("button.close").on('click', function() {
        var row = $(this).closest('.row');
        var dishid = row.attr('data-dishid');      
        console.log(dishid);
    });
});

Answer 4

$("button.close").on("click", function(){
   console.log('ok');
});

您需要将on（）函数用于动态生成的html元素

Answer 5

尝试：

$("button.close").on("click", function() {
  console.log('ok');
});

您需要.on事件处理程序来动态创建DOM元素。

更新：

您无需将jQuery $放在前缀的内容之前。 这是与您的代码一起工作的小提琴。

https://jsfiddle.net/3k7Laohn/

Answer 6

这是您更新的代码 。

我变了：

$("button.close").click(function() {
      var row = $(this).closest('.row');
      var dishid = row.attr('data-dishid');      
});

至：

$(".dishes").on('click', 'button.close', function() {
      var row = $(this).closest('.row');
      var dishid = row.attr('data-dishid');      
      console.log(dishid);
});

这个问题在互联网上得到了解答，这是jQuery网站的摘录：

事件处理程序仅绑定到当前选定的元素； 它们必须在您的代码调用.on（）时存在。 或者，使用委托事件来附加事件处理程序。

委派事件的优势在于，它们可以处理来自后代元素的事件，这些事件在以后的时间添加到文档中。

资源

Answer 7

在检查您的代码后，单击事件应该可以正常工作。 也许问题取决于时机 。 我的假设是，如果您有以下代码：

$("button.close").click(function() {
  var row = $(this).closest('.row');
  var dishid = row.attr('data-dishid');
}); 

您尚未将对象附加到DOM上。 每次调用下面的方法时，都必须立即绑定click事件。 最好是将代码放在一起，以检查其是否有效。

$('.dishes').prepend($('<div class="row" data-dishid="'+dishid+'"><div class="col-md-8">'+dishname+'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>'));
$("button.close").click(function() {
  var row = $(this).closest('.row');
  var dishid = row.attr('data-dishid');
});