如何使用JQuery或javascript从动态创建的按钮获取click事件对象数据

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);

在此代码之后,创建了New Button并且事件也触发了,但是我无法通过使用相同的上述代码来获取Event对象.

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

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

Answer 1

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

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

这只是一个简单的例子,最好将它绑定在元素上,当它首次加载而不是打开时,它已经在页面上已经存在document.