如何使用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);

在这段代码之后，创建了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 。

Answer 2

您应该使用以下内容：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#holder').on('click', ':button', function(event) {
    alert('testlink'); 
});

这会将您的事件附加到#holder元素内的任何按钮上，从而减少了必须检查整个document元素树的范围并提高了效率。

更多信息在这里：-

• http://api.jquery.com/on/
• http://learn.jquery.com/events/event-delegation/

Answer 3

事件对象将作为第一个参数传递给您的点击处理程序。

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