Question

请使用以下内容帮助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>

当我加载页面并单击按钮时，我会看到调试警报，然后克隆＆＃34;内容＆＃34;段落出现了预期。当我再次单击该按钮时，我收到警报，但不是新段落。为什么一个响应点击工作，而不是另一个？我怎样才能让他们两个都工作？

Answer 1

将点击事件中的chunk = $('.content').clone(true);置于此

$(document).ready(function() {

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

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

Answer 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);
   });    

});

Answer 3

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

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

Answer 4

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

Answer 5

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

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

jQuery click事件只能运行一次（但总是会激活！）

5 个答案: