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
点击第二个TEST以后的div按钮

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

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

你写道：

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

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

但首先提示：如果要重复，请不要使用HTML ID（#btn）。因此，请使用类（.btn）来捕获所有元素。

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

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

这将捕获文档上的任何click事件（您可以使用容器div而不是现在更容易显示），并且只有在匹配给定选择器（.btn）时才运行回调。

Answer 3

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

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

这样，事件附加到身体，总是存在，但只有当匹配的元素出现时才触发，无论它们何时被创建（在加载js之前或之后）

第二个附加不适用于jquery

3 个答案: