第二次追加不适用于 jquery

Question

我有一个表单，需要根据需要多次附加字段。如果单击按钮 CLICK TO ADD ANOTHER FIELD，则应附加 div。在第一次追加 (onload) 之后，div 响应正确，但从第二次追加开始，我没有从 div 得到类似的响应。这是我的 JSFiddle

如果我点击 TEST BUTTON ，我会收到第一个 div 的警报，但在添加另一个 div （通过点击 CLICK TO ADD ANOTHER FIELD 按钮）时，按钮(TEST) 从第二个 div 开始不再起作用。

我试过 clone() 来解决这个问题，但无法解决这个问题。可能是我没有正确使用它。

要重现该问题，请按照以下步骤操作::

点击CLICK TO ADD ANOTHER FIELD按钮添加div
从第二个 div 开始单击 TEST 按钮

请看一下并提出建议。提前致谢。

Answer 1

你必须像 $(document).on('click','.test',function(){

这样使用委托

var count = 1;
 
$.fn.addclients = function(add){
 
var mydiv = '';

mydiv = '<div class="dataadd"><fieldset><legend>Test: '+add+'</legend><b>Test Name :</b> <input type="text" id="ct'+add+'" name="cname" value="" style="width:250px" />'+
            ' <button class="test" id="test" style="float:left;">TEST</button>'+
'<br>'+
'</fieldset></div>';
//$(".dataadd").clone().appendTo('#registerForm');
      
$('#registerForm').append(mydiv);
}
$.fn.addclients(count);

$(document).on('click','#btn',function(){
  ++count;
  $.fn.addclients(count);
        return false;
});

$(document).on('click','.test',function(){
  alert("test");
    return false;
});

.zend_form{
   font-weight:bold;
 font-size:10px;
 width:358px; 
    float: left;
    
}
.dataadd{
 font-weight:bold;
 font-size:10px;
 width:358px;
 //border: 1px solid;
 margin-top: 15px;
 margin-bottom: 15px;
 //padding: 5px;
 //float:left;
}
.selectbox{
 margin-top: 15px;
 width:155px; 
 height:100px;
}
.buttonc{
 background-color: #fff;
 width:145px; 
 height:45px;
}
.selection_area{
 font-weight:bold;
 font-size:10px;
}
input {
 width: 200px;
}

dt {
 width:50%; /* adjust the width; make sure the total of both is 100% */
 
}
dd {
 width:80%; /* adjust the width; make sure the total of both is 100% */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="registerForm" enctype="application/x-www-form-urlencoded" method="post" action=""><dl class="zend_form">
<dt id="firstname-label"><label for="firstname" class="required">First Name:</label></dt>
<dd id="firstname-element">
<input type="text" name="firstname" id="firstname" value="" style="width:200px; float:left;" /></dd>
<dt id="middlename-label"><label for="middlename" class="optional">Last Name</label></dt>
<dd id="middlename-element">
<input type="text" name="middlename" id="middlename" value="" style="width:200px" /></dd>
    </form>    
  <div style='display:table;background-color:#ccc;width:99%;padding:5px;'>
         <button class='buttonc' name='btn_sub' id='btn' style='float:left;'>CLICK TO ADD ANOTHER FIELD</button>
 </div>

Answer 2

主体加载后创建的所有元素必须使用委托才能工作

$("body").on("click",".test",function(){
    alert("test");
    return false;
});

这样，事件附加到body，一直存在，但只在匹配的元素出现时触发，不管它们是什么时候创建的（加载js之前或之后）

Answer 3

你写：

$('#btn').click(function(){ ... });

但这只会在运行执行此代码时将事件处理程序绑定到当前页面上的元素。所以后面添加的元素不会被这段代码覆盖。

但第一个提示：如果您想重复它，请不要使用 HTML ID (#btn)。因此，改为使用 class (.btn) 来捕获所有元素。

然后最好的方法是这样写：

$(document).on('click', '.btn', function() { ... } )

这将捕获文档上的任何点击事件（您可以使用容器 div 代替——现在更容易显示），并且只有运行匹配给定选择器的回调(.btn).

第二次追加不适用于 jquery

Second append doesn't work on jquery

html

javascript

css

jquery

append