第二个附加不适用于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

你写：

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

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

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

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

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

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

Answer 2

在正文加载后创建的所有元素都必须使用委托才能工作

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

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

Answer 3

你必须使用像$(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>