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

xv8emn3q 于 2022-11-03 发布在 jQuery

关注(0)|答案(3)|浏览(211)

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

在这段代码之后，创建了NewButton，并且事件也触发了，但是我无法使用上面的代码来获取Event对象。

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

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

jquery

来源：https://stackoverflow.com/questions/17018596/how-to-get-click-event-object-data-from-dynamically-created-button-using-jquery

3条答案

按热度按时间

x7rlezfr1#

你可以使用on()来绑定动态添加的元素上的事件。

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

这只是一个简单的例子，最好将它绑定到更靠近按钮的元素上，而不是绑定到document上。

赞(0）回复(0）举报 2022-11-03

m3eecexj2#

您应该使用以下内容：

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

这会将您的事件附加到#holder元素中的任何按钮，从而减少了必须检查整个document元素树的范围，并提高了效率。
更多信息请点击此处：-

赞(0）回复(0）举报 2022-11-03

qxgroojn3#

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

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

赞(0）回复(0）举报 2022-11-03

我来回答

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

3条答案

相关问题

热门标签

最新问答