Javascript jQuery - 动态创建按钮和附加事件处理程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6205258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Dynamically Create Button and Attach Event Handler
提问by senfo
I would like to dynamically add a button control to a table using jQuery and attach a click event handler. I tried the following, without success:
我想使用 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>');
});The above code successfully adds a new row, but it doesn't handle adding the button correctly. How would I accomplish this using jQuery?
上面的代码成功添加了一个新行，但它没有正确处理添加按钮。我将如何使用 jQuery 完成此操作？
回答by Matt Ball
Calling .html()serializes the element to a string, so all event handlers and other associated data is lost. Here's how I'd do it:
调用.html()将元素序列化为字符串，因此所有事件处理程序和其他相关数据都将丢失。这是我的做法：
$("#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);
});
Or,
或者，
$("#myButton").click(function ()
{
var test = $('<button/>',
{
text: 'Test',
click: function () { alert('hi'); }
}).wrap('<tr><td></td></tr>').closest('tr');
$("#addNodeTable tr:last").before(test);
});
If you don't like passing a map of properties to $(), you can instead use
如果您不喜欢将属性映射传递给$()，则可以改用
$('<button/>')
.text('Test')
.click(function () { alert('hi'); });
// or
$('<button>Test</button>').click(function () { alert('hi'); });
回答by Schovi
Quick fix. Create whole structure tr > td > button; then find button inside; attach event on it; end filtering of chain and at the and insert it into dom.
快速解决。创建整个结构 tr > td > 按钮；然后找到里面的按钮；在其上附加事件；结束对链和在 的过滤并将其插入到 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);
});
回答by Alnitak
Your problem is that you're converting the button into an HTML snippet when you add it to the table, but that snippet is not the same objectas the one that has the click handler on it.
您的问题是当您将按钮添加到表格中时，您正在将按钮转换为 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);
});
回答by Brett Zamir
You can either use onclick inside the button to ensure the event is preserved, or else attach the button click handler by finding the button after it is inserted. The test.html()call will not serialize the event.
您可以在按钮内使用 onclick 以确保保留事件，或者通过在插入按钮后查找按钮来附加按钮单击处理程序。该test.html()调用不会序列化事件。
回答by jnoreiga
You were just adding the html string. Not the element you created with a click event listener.
您只是添加了 html 字符串。不是您使用单击事件侦听器创建的元素。
Try This:
尝试这个：
<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>
