第二个追加在jquery上不起作用

Second append doesn't work on jquery

本文关键字：不起作用 jquery 追加 第二个      更新时间：2023-09-26

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

请看一下并提出建议。

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

你写:

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

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

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

最好的方式是这样写:

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

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

所有在body load之后创建的元素必须使用委托来工作

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

这样，事件就被附加到主体上，它总是存在的，但只在匹配的元素出现时触发，不管它们是什么时候创建的(在js加载之前还是之后)

相关文章：