javascript - 如何对动态生成的按钮点击使用react？

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');      
});

我该如何解决这个问题？

参见the sample code .

Answer 1

您需要event delegation用于动态生成的元素。尝试如下。

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

<强> WORKING DEMO