将 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。

这是在没有委托的情况下使用.on 方法——它不起作用：

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

这是使用带有委托的.on 方法——这确实工作：

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

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

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

在我的示例中，新按钮将在 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);
};

这里有一个可以切换事件委托的工作演示：http://codepen.io/tinacious/pen/MbQJWX?editors=1010

Answer 2

var button = document.createElement('button')

button.addEventListener('click', function(event) {
 ... your code here ...
})

someContainerElement.appendChild(button)

方法名称几乎可以解释发生了什么，但要明确：

首先，创建一个button 标记并将其分配给button 变量

var button = document.createElement('button')

为button 元素添加一个事件监听器。它监听click 事件，并触发函数。

button.addEventListener('click', function(event) {
  ... your code here ...
})

然后将您的button 附加到someContainerElement。这意味着您的button 将被放置在这个父元素中。

someContainerElement.appendChild(button)