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

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

像

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

Answer 2

动态生成的元素需要event delegation。尝试以下。

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

<强> WORKING DEMO

Answer 3

I have seen the code. You have to call the click function of the dynamic element immediately after the element appended. Try the code below.

$("#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');
});

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

更新：

您不需要在前置内容之前放置jQuery $。这是你的代码的工作小提琴。

https://jsfiddle.net/3k7Laohn/

Answer 6

这是您的updated code。

我改变了：

$("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（）时必须存在。或者，使用委派事件来附加事件   处理程序。

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

Source

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

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

7 个答案: