jQuery click 事件只工作一次（但总是触发！）答案

【问题标题】：jQuery click event only works once (but fires always!)jQuery click 事件只工作一次（但总是触发！）
【发布时间】：2012-02-14 04:58:01
【问题描述】：

请帮助 jQuery newby 完成以下操作。我有一个表单，当单击#addMore 按钮时，我正在尝试添加连续的表单字段块。在这个板子的帮助下，我现在已经开始工作了。但它只工作一次。我已经将事情缩减到最小的情况：

<html>
<head>
<title>Reserves Form</title>
<script src="../jquery/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {
var chunk = $('.content').clone(true);
 $('#addMore').live('click', function() {
     alert('debug!');
     $('#container').append(chunk);
 });    
});
</script>
<body>
<div id="container">
<p class="content">lorem ipsum blah blah</p>
</div>
<button type="button" id="addMore">Add Another Paragraph</button>
</body>
</html>

当我加载页面并单击按钮时，我会看到调试警报，然后按预期出现“内容”段落的克隆。当我再次单击该按钮时，我会收到警报，但不会收到新段落。为什么对点击的一种响应有效，而另一种则无效？我怎样才能让它们都工作？

【问题讨论】：

标签： jquery

【解决方案1】：

把chunk = $('.content').clone(true);放在点击事件里面变成这样

$(document).ready(function() {

 $('#addMore').live('click', function() {
    var chunk = $('.content').clone(true);
     alert('debug!');
     $('#container').append(chunk);
 });    
});

以及与您的问题无关的其他内容：您真的要使用live吗？

【讨论】：

好答案，+1。我注意到的另一个问题是，对于问题中使用的选择器，每次点击都会复制所有具有类 .content 的元素。所以第一次点击加1，第二次点击加2...
糟糕！我应该使用“开”。对不起
可能是 $('.content').last().clone(true);

【解决方案2】：

您一次又一次地将同一个对象附加到同一个容器中，因此您不会看到任何区别，就好像它什么也没做一样。

试试这个，它将克隆点击处理程序中的第一个 .content 元素并附加它。

$(document).ready(function() {
   $('#addMore').live('click', function() {
       alert('debug!');
       $('#container').append($('.content:first').clone(true));
   });    
});

或者你可以试试这个，它会附加 html 字符串而不是克隆的对象。在这种方法中，克隆只使用一次，因为字符串附加可以进行任意次数，所以它比以前的方法更好。

$(document).ready(function() {
   var content = $('<div />').append($('.content').clone(true)).html();

   $('#addMore').live('click', function() {
       alert('debug!');
       $('#container').append(content);
   });    

});

【讨论】：

【解决方案3】：

已经询问了very similar question。每次执行处理程序时都需要克隆元素。

$(document).ready(function() {
 $('#addMore').live('click', function() {
     var chunk = $('.content').clone(true);
     alert('debug!');
     $('#container').append(chunk);
 });    
});

【讨论】：

【解决方案4】：

如果您希望每次都发生这种情况，则需要在实时处理程序中克隆该段落。您的脚本正在附加该段落的一次性克隆（缓存）副本。将克隆语句移动到您的单击处理程序中以获得预期结果。

【讨论】：

【解决方案5】：

你只克隆一次。在第一次分配之后，您只是指代克隆的元素，因此它只是将它从它所在的位置移动到您想要的位置。您可以通过使 chunk 成为返回克隆元素的函数来修复它：

var chunk = function() {
   return $('.content').clone(true);
}

【讨论】：