<script type="text/javascript">
$(function(){
$('button').each(function(i){
$(this).click(function(){
$(this).after('<br /><button type="button">Button</button>');
});
});
});
</script>
<button type="button">Button</button>
如果我单击该按钮，它就会起作用并在其后面添加一个按钮。我可以继续单击同一个按钮并添加更多按钮。但是，如果我单击任何已添加的按钮，它们不会添加任何内容。我尝试更改为:
$(function(){
function update(){
$('button').each(function(i){
$(this).click(function(){
$(this).after('<br /><button type="button">Button</button>');
update();
});
});
};
update();
});
但是这会选择第一个按钮两次，所以如果我按一次它就会起作用，它添加的按钮也会起作用，但如果我第二次按第一个按钮，它会添加 2 个以上的按钮，然后再添加 4 个按钮，等等。
最佳答案
使用事件委托(delegate)来管理点击事件。
$('body').delegate('button','click',function() {
$(this).after('<br /><button type="button">Button</button>');
});
这使用 delegate() [docs]方法来处理 <body> 中发生的所有点击并对匹配 'button' 的元素执行选择器。
尝试一下: http://jsfiddle.net/Krrae/
如果所有按钮都位于公共(public)容器中(<body> 除外)，则将其用于委托(delegate):
$('#some_button_container').delegate('button','click',function() {
$(this).after('<br /><button type="button">Button</button>');
});
关于javascript - 将元素添加到 DOM 后，它不会运行相同的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6511326/