javascript - 如何使用 jQuery 或 JavaScript 从动态创建的按钮中获取点击事件对象数据

Question

我正在收集页面按钮点击事件。通常我从静态创建的 DOM 元素中收集对象。通过使用:

 $('input[type=button]').each(function () {
              $(this).bind('click', function () {
                  Console.log(this);
              });
          });

但是当我动态添加一个新按钮时:

 vvar newBtn = document.createElement('input');
      newBtn.type = 'button';
      newBtn.setAttribute('id', 'JgenerateBtn');
      newBtn.setAttribute('value', 'JgenerateBtn');
      newBtn.onclick = function () { alert('javascript dynamically created button'); };
      var holderDiv = document.getElementById('holder');
      holderDiv.appendChild(newBtn);

在这段代码之后，创建了新按钮并触发了事件，但是我无法通过使用与上面相同的代码来获取事件对象。

 $('input[type=button]').each(function () {
          $(this).bind('click', function () {
              Console.log(this);
          });
      });

请提供获取动态创建的元素事件对象的建议。

Answer 1

您可以使用 on()用于在动态添加的元素上绑定(bind)事件。像这样:

$(document).on('click', 'input[type=button]', function(){
    console.log(this);
});

这只是一个简单的例子，最好将它绑定(bind)在靠近你的按钮的元素上，当它第一次加载时已经在页面上，而不是在 document 上。