Jquery/Javascript：使用 javascript 动态添加的按钮不起作用答案

【问题标题】：Jquery/Javascript: Buttons added dynamically with javascript do not workJquery/Javascript：使用 javascript 动态添加的按钮不起作用
【发布时间】：2010-05-25 15:53:16
【问题描述】：

我有一段 html 代码：

<div id="chunk-1" class="chunk">  
    <div class="chunkText">Text<div>  
    <button class="addChunk">Click Me</button>  
</div>

<script>

$(".addChunk").click(function(){create_chunk(this.parentNode)})

function create_chunk(after_this){
    $(after_this).after(chunk_html)
    var i = 0
    $("div.chunk").each(function(){$(this).attr('id', "chunk-" + i++)})
    }

</script>

现在，这可行，但仅适用于页面上静态呈现的 .chunk。当我按下按钮时，会出现第二个块，但该按钮不起作用。如果我为要呈现的两个或更多块添加 html，则每个都可以工作，但它创建的块的按钮不起作用。我该怎么办？

【问题讨论】：

关于这个老问题的（几乎）所有答案的警告：请参阅jquery's live() is deprecated. What do I use now? -- 使用.on 或.delegate，而不是.live.

标签： javascript jquery dynamic button

【解决方案1】：

当您添加处理程序时，下一行中的事件处理程序会将单击事件附加到与选择器匹配的元素。

$(".addChunk").click(function(){create_chunk(this.parentNode)})

您可以使用live handler 来执行此操作。以下代码将解决您的问题

$(".addChunk").live('click'. function(){create_chunk(this.parentNode)});

【讨论】：

@jAndy - 问题是添加了另一个块......那么你会委托什么？ #chunk-1在这里不行，你需要更高的祖先。
哦，好吧，出于某种原因，我只是假设 OP 想要在 div 中复制一个项目。

【解决方案2】：

使用“实时”jQuery 函数。

$(".addChunk").live('click'. function(){create_chunk(this.parentNode)});

问题是您绑定到单个元素。 “实时”选项将监视文档中对具有“.addChunk”类的元素的任何点击。

【讨论】：

【解决方案3】：

替换

.bind()

与

.live()

甚至更好地使用

.delegate()

这是你的情况：

$('#chunk-1').delegate('.addChunk', 'click', function(){create_chunk(this.parentNode);})

此外，请转到 www.jquery.com 并阅读文档。

【讨论】：