我有一个表单,需要根据需要多次追加一个字段。如果单击按钮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
按钮请看一下并提出建议。提前谢谢。
答案 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之前或之后)