html动态生成按钮事件,javascript-jQuery-动态创建按钮并附加事件指针

javascript-jQuery-动态创建按钮并附加事件指针

我想使用jQuery向表中动态添加按钮控件，并附加click事件处理程序。 我尝试了以下操作，但没有成功：

$("#myButton").click(function () {

var test = $('Test').click(function () {

alert('hi');

});

$("#nodeAttributeHeader").attr('style', 'display: table-row;');

$("#addNodeTable tr:last").before('

' + test.html() + '');

});

上面的代码成功添加了新行，但是不能正确添加按钮。 我将如何使用jQuery完成此操作？

senfo asked 2020-08-10T05:40:42Z

5个解决方案

55 votes

调用$()会将元素序列化为字符串，因此所有事件处理程序和其他关联数据都将丢失。 这是我的处理方式：

$("#myButton").click(function ()

{

var test = $('',

{

text: 'Test',

click: function () { alert('hi'); }

});

var parent = $('

').children().append(test).end();

$("#addNodeTable tr:last").before(parent);

});

要么，

$("#myButton").click(function ()

{

var test = $('',

{

text: 'Test',

click: function () { alert('hi'); }

}).wrap('

').closest('tr');

$("#addNodeTable tr:last").before(test);

});

如果您不喜欢将属性映射传递给$()，则可以改用

$('')

.text('Test')

.click(function () { alert('hi'); });

// or

$('Test').click(function () { alert('hi'); });

Matt Ball answered 2020-08-10T05:40:56Z

9 votes

快速解决。创建整个结构tr> td> button; 然后在里面找到按钮； 附加事件 结束链的过滤，然后将其插入dom。

$("#myButton").click(function () {

var test = $('

Test').find('button').click(function () {

alert('hi');

}).end();

$("#nodeAttributeHeader").attr('style', 'display: table-row;');

$("#addNodeTable tr:last").before(test);

});

Schovi answered 2020-08-10T05:41:17Z

8 votes

您的问题是，当您将按钮添加到表中时，您正在将其转换为HTML代码段，但是该代码段与带有单击处理程序的对象不同。

$("#myButton").click(function () {

var test = $('Test').click(function () {

alert('hi');

});

$("#nodeAttributeHeader").css('display', 'table-row'); // NB: changed

var tr = $('

').insertBefore('#addNodeTable tr:last');

var td = $('

').append(test).appendTo(tr);

});

Alnitak answered 2020-08-10T05:41:37Z

0 votes

您可以在按钮内部使用onclick来确保事件被保留，或者可以在按钮插入后通过查找按钮来附加按钮单击处理程序。 test.html()调用不会序列化事件。

Brett Zamir answered 2020-08-10T05:41:57Z

0 votes

您只是添加了html字符串。 不是您使用click事件监听器创建的元素。

试试这个：

Row 1

Row 2

$(document).ready(function() {

var test = $('Test').click(function () {

alert('hi');

});

$("#addNodeTable tr:last").append('

').find("td:last").append(test);

});

jnoreiga answered 2020-08-10T05:42:21Z