第二个附加不适用于jquery

时间:2015-06-10 13:41:01

标签: javascript jquery html css append

我有一个表单,需要根据需要多次追加一个字段。如果单击按钮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按钮

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

你写道:

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

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

但首先提示:如果要重复,请不要使用HTML ID(#btn)。因此,请使用类(.btn)来捕获所有元素。

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

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

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

答案 2 :(得分:0)

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

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

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