Javascript 是否将onclick事件设置为动态添加的按钮？

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

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

我想为这个按钮创建

onclick

，这样当我点击它时，它将调用函数

purchase（json[I].id）

。我应该如何添加它

var button = document.createElement('button')

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

someContainerElement.appendChild(button)

方法名称基本上解释了正在发生的事情，但要明确：

首先，创建一个

按钮

标记，并将其分配给

按钮

变量

var button = document.createElement('button')

将事件侦听器添加到

按钮

元素。它侦听

单击事件，并启动函数

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

然后将
按钮添加到
someContainerElement
中。这意味着您的
按钮将放置在此父元素中

someContainerElement.appendChild(button)

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

让我们假设HTML如下所示：

<div id="buttons">

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

</div>

这是在委托中使用
。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);

此处提供了一个可以切换事件委派的工作演示：
请使用链接解释此代码的工作原理，不要只给出代码，因为解释更有可能帮助未来的读者。这正是我需要的：
$（'#button'）。on（'click'，'.button'，handleClick））我在一个“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);

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

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

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