jQuery – dynamic创buildbutton并附加事件处理程序
我想dynamic地添加一个button控件到一个表使用jQuery和附加一个点击事件处理程序。 我尝试了以下，没有成功：
$("#myButton").click(function () { var test = $('<button>Test</button>').click(function () { alert('hi'); }); $("#nodeAttributeHeader").attr('style', 'display: table-row;'); $("#addNodeTable tr:last").before('<tr><td>' + test.html() + '</td></tr>'); }); 上面的代码成功地添加了一个新的行，但是它不能正确地添加button。 我将如何完成这个使用jQuery？
调用.html()将元素序列化为一个string，所以所有事件处理程序和其他相关数据都将丢失。 以下是我该怎么做：
$("#myButton").click(function () { var test = $('<button/>', { text: 'Test', click: function () { alert('hi'); } }); var parent = $('<tr><td></td></tr>').children().append(test).end(); $("#addNodeTable tr:last").before(parent); });
要么，
$("#myButton").click(function () { var test = $('<button/>', { text: 'Test', click: function () { alert('hi'); } }).wrap('<tr><td></td></tr>').closest('tr'); $("#addNodeTable tr:last").before(test); });
如果您不喜欢将属性地图传递给$() ，则可以改为使用
$('<button/>') .text('Test') .click(function () { alert('hi'); }); // or $('<button>Test</button>').click(function () { alert('hi'); });
快速解决。 创build整个结构tr> td>button; 然后在里面findbutton; 附加事件; 链端的过滤和在和插入到DOM。
$("#myButton").click(function () { var test = $('<tr><td><button>Test</button></td></tr>').find('button').click(function () { alert('hi'); }).end(); $("#nodeAttributeHeader").attr('style', 'display: table-row;'); $("#addNodeTable tr:last").before(test); });
您的问题是，当您将button添加到表格中时，将button转换为HTML片段，但该片段与具有点击处理器的对象不是同一个对象 。
$("#myButton").click(function () { var test = $('<button>Test</button>').click(function () { alert('hi'); }); $("#nodeAttributeHeader").css('display', 'table-row'); // NB: changed var tr = $('<tr>').insertBefore('#addNodeTable tr:last'); var td = $('<td>').append(test).appendTo(tr); });
您可以使用button内的onclick来确保事件被保留，或者通过在插入button后查找button来附加button点击处理程序。 test.html()调用不会序列化事件。
你只是添加的HTMLstring。 不是您用单击事件侦听器创build的元素。
尝试这个：
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> </head> <body> <table id="addNodeTable"> <tr> <td> Row 1 </td> </tr> <tr > <td> Row 2 </td> </tr> </table> </body> </html> <script type="text/javascript"> $(document).ready(function() { var test = $('<button>Test</button>').click(function () { alert('hi'); }); $("#addNodeTable tr:last").append('<tr><td></td></tr>').find("td:last").append(test); }); </script>
