Второй append не работает на jQuery

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 FIELDdiv
• Нажмите на кнопку TEST на второй div года

Пожалуйста, принять взгляните и предложите. Заранее спасибо.

Answer 1

Вы должны использовать делегирование как $(document).on('click','.test',function(){

var count = 1; 
 
\t 
 
$.fn.addclients = function(add){ 
 
\t 
 
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(){ 
 
\t \t ++count; 
 
\t \t $.fn.addclients(count); 
 
     return false; 
 
}); 
 

 
$(document).on('click','.test',function(){ 
 
\t \t alert("test"); 
 
    return false; 
 
});

.zend_form{ 
 
    font-weight:bold; 
 
\t font-size:10px; 
 
\t width:358px; 
 
    float: left; 
 
    
 
} 
 
.dataadd{ 
 
\t font-weight:bold; 
 
\t font-size:10px; 
 
\t width:358px; 
 
\t //border: 1px solid; 
 
\t margin-top: 15px; 
 
\t margin-bottom: 15px; 
 
\t //padding: 5px; 
 
\t //float:left; 
 
} 
 
.selectbox{ 
 
\t margin-top: 15px; 
 
\t width:155px; 
 
\t height:100px; 
 
} 
 
.buttonc{ 
 
\t background-color: #fff; 
 
\t width:145px; 
 
\t height:45px; 
 
} 
 
.selection_area{ 
 
\t font-weight:bold; 
 
\t font-size:10px; 
 
} 
 
input { 
 
\t 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;'> 
 
\t   <button class='buttonc' name='btn_sub' id='btn' style='float:left;'>CLICK TO ADD ANOTHER FIELD</button> 
 
\t </div>

Answer 2

все элементы, созданные после загрузки тела должны использовать делегирование работать

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

Таким образом, событие прилагается к тело, ведьма всегда существует, но только срабатывает, когда появляются согласованные элементы, независимо от того, курица они созданы (до или после того, как JS загружается)

Answer 3

Вы пишете:

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

, но это будет только привязать обработчик событий к элементам в настоящее время на странице при выполнении этого кода. Таким образом, элементы, добавленные позже, не будут покрываться этим кодом.

Но первый совет: не используйте HTML-код (#btn), если вы хотите его повторить. Поэтому вместо этого используйте класс (.btn), чтобы захватить все элементы.

И тогда лучший способ, чтобы написать что-то вроде:

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

Это будет фиксировать любое событие щелчка по документу (можно использовать контейнер DIV вместо --just проще показать сейчас), и только запустите обратный вызов, если он соответствует данному селектору (.btn).