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元素树并提高效率的范围。

此处有更多信息： -

Answer 3

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

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

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

3 个答案: