javascript - 设置onclick事件动态添加按钮？

Question

我想问如何将 onclick 事件分配给 DOM 上动态添加的按钮？例如，通过以下方式创建按钮后

var btn = document.createElement("button");

我想为此按钮创建onclick，以便当我单击它时，这将调用函数purchase(json[i].id)。我该如何添加？

Answer 1

为了将监听器添加到以编程方式添加的按钮，我们需要将监听器附加到按钮的父级而不是按钮本身。

假设 HTML 如下:

<div id="buttons">

  <button class="btn">
    Existing button
  </button>

</div>

我们可以使用 jQuery 的 .on 方法 with event delegation .

这是使用没有委托(delegate)的 .on 方法 - 它不起作用:

$('.btn').on('click', handleClick); // don't use this, it won't work

这是使用带有委托(delegate)的 .on 方法 - 这确实有效:

$('#buttons').on('click', '.btn', handleClick);

为了使其工作，原始按钮和您将添加的按钮需要有一个共同的父元素，根据文档:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

在我的示例中，新按钮将在 2 秒超时后以编程方式添加到父元素 #buttons，并且单击处理程序仍将附加，因为 #buttons > 页面加载时是否存在。

当我们将单击处理程序附加到按钮时，我们无法将单击处理程序附加到尚不存在的按钮，但是如果我们附加到从一开始就存在的按钮的父级，则当新按钮添加后，它们将附加点击监听器:

var $buttons = $('#buttons');

var handleClick = function () {
  alert('Button click works!');
};

// Works for new buttons (uses event delegation)
$buttons.on('click', '.btn', handleClick);


// Add a new button after 2 seconds
setTimeout(function () {
  var $newButton = $('<button />');

  $newButton
    .addClass('btn')
    .text('New button');

  $buttons.append($newButton);
}, 2000);

如果您需要购买 ID，可以将其存储在数据属性中，如下所示:

  <button class="btn" data-purchase="purchase_01">
    Existing button
  </button>

然后，在 JavaScript 中，您可以在处理程序中像这样访问它:

var handleClick = function () {
  var purchaseId = $(this).data('purchase');

  alert('Button click works! \n\n' + purchaseId);
};

这里提供了一个可以切换事件委托(delegate)的工作演示:http://codepen.io/tinacious/pen/MbQJWX?editors=1010