1

我正在收集页面按钮点击事件。通常我从静态创建的 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);
          });
      });

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

4

3 回答 3

6

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

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

这只是一个简单的例子，最好将它绑定在更靠近您的按钮的元素上，该按钮在首次加载时已经在页面上，而不是 on document。

于 2013-06-10T07:15:36.323 回答
1

您应该使用以下内容：

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

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

更多信息在这里： -

于 2013-06-10T07:22:08.817 回答
0

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

$('input[type=button]').each(function () {
    $(this).bind('click', function (event) {
        Console.log(event);
    });
});
于 2013-06-10T07:17:18.140 回答