JQuery target a div in after() event

Question

У меня очень маленькая проблема. У меня есть поле ввода, в котором есть кнопка для создания экземпляра его при нажатии. Все работает нормально, когда событие click инициировано, но проблема возникает, когда я нацелен на элемент, который был сгенерирован с after(), я не могу этого сделать. смотрите код ниже

HTML

<div class="after-add-more form-group"> 
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here"> 
</div> 

    <!-- Copy Fields --> 
<div class="copy hide"> 
    <div class="form-group more-duty"> 
     <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here"> 
     <button class="remove" type="button">Remove Stuff</button> 
    </div> 
</div> 

<button class="add-more" type="button">Add Stuff</button> 

Javascript

$(".add-more").click(function(){ 
    var html = $(".copy").html(); 
    $(".after-add-more").after(html); 
}); 

$("body").on("click",".remove",function(){ 
    $(this).parents(".more-duty").remove(); 
}); 

$('.try').click(function() { 
    alert("Ouch"); 
}); 

Когда я нажимаю сгенерированный вход так, как я могу повторить Уч, событие не called.please см this fiddle. Любая помощь будет оценена. Благодарю .

Answer 1

Вам необходимо делегирование событий, такое же, как вы делали это для .remove класса щелчка как,

$("body").on("click", ".remove", function() { 
    $(this).parents(".more-duty").remove(); 
}).on('click', '.try', function() { 
    alert("Ouch"); 
}); 

$(".add-more").click(function() { 
 
    var html = $(".copy").html(); 
 
    $(".after-add-more").after(html); 
 
}); 
 

 
$("body").on("click", ".remove", function() { 
 
    $(this).parents(".more-duty").remove(); 
 
}).on('click', '.try', function() { 
 
    alert("Ouch"); 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="after-add-more form-group"> 
 
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here"> 
 
</div> 
 

 
<!-- Copy Fields --> 
 
<div class="copy hide"> 
 
    <div class="form-group more-duty"> 
 
    <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here"> 
 
    <button class="remove" type="button">Remove Stuff</button> 
 
    </div> 
 
</div> 
 

 
<button class="add-more" type="button">Add Stuff</button>

Answer 2

$(".add-more").click(function() { 
 
    var html = $(".copy").html(); 
 
    $(".after-add-more").after(html); 
 
}); 
 

 
$("body").on("click", ".remove", function() { 
 
    $(this).parents(".more-duty").remove(); 
 
}); 
 
$(document).on("click",'.try',function() {//use .on() 
 
    alert("Ouch"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="after-add-more form-group"> 
 
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here"> 
 
</div> 
 

 
<!-- Copy Fields --> 
 
<div class="copy hide"> 
 
    <div class="form-group more-duty"> 
 
    <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here"> 
 
    <button class="remove" type="button">Remove Stuff</button> 
 
    </div> 
 
</div> 
 

 
<button class="add-more" type="button">Add Stuff</button> Javascript

Это динамически добавлено поэтому используйте .on()

Answer 3

$ ("тело") .По ("щелчок", ".try", функция() {

 alert(" Ouch "); 

});

/** это будет работать. В вашем случае он не работал, потому что событие click не связывалось с элементом, потому что оно было сгенерировано после слов */