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

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

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

您需要为动态生成的 html 个元素使用 on() 函数

Answer 3

尝试：

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

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

更新：

不需要在前缀内容前加上jQuery $。这是一个与您的代码一起工作的 fiddle。

https://jsfiddle.net/3k7Laohn/

Answer 4

动态生成的元素需要 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 5

这是你的 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 网站的一个片段：

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). Alternatively, use delegated events to attach event handlers.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

Source

Answer 6

我看过代码了。您必须在附加元素后立即调用动态元素的点击功能。试试下面的代码。

$("#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 7

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

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

您还没有将对象附加到 DOM。每次调用下面的方法，都要马上绑定点击事件。最好是将代码放在一起，看看它是否有效。

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

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

How to react on the dynamically generated button click?

html

javascript

jquery

jquery-events