第二个追加不适用于jQuery

Question

我有一个表格，需要根据需要多次附加一个字段。 如果单击“单击以CLICK TO ADD ANOTHER FIELD按钮，则应附加div 。 在第一个追加（onload）之后， div正确响应，但是从第二个开始，我没有从div得到类似的响应。 这是我的JSFiddle

如果单击TEST BUTTON ， TEST BUTTON收到第一个div警报，但添加另一个div （通过单击“ CLICK TO ADD ANOTHER FIELD按钮）时，第二个div以后的按钮（TEST）不再起作用。

我尝试过clone()来帮助解决此问题，但无法解决。 可能是我没有正确使用它。

要复制该问题，请按照以下步骤操作：

• 单击“ CLICK TO ADD ANOTHER FIELD按钮以添加div
• 从第二个div开始单击TEST按钮

请看看并提出建议。 提前致谢。

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之前或之后）