Jquery Ziel ein Div in After() Ereignis

Question

Ich habe ein sehr kleines Problem. Ich habe ein Eingabefeld, das eine Schaltfläche hat, um eine Instanz davon zu erstellen, wenn darauf geklickt wird. Alles funktioniert gut, wenn das click -Ereignis initiiert wird, aber das Problem kommt, wenn ich das Element anvisiere, das mit after() erzeugt wurde, kann ich nicht scheinen, das zu tun. finden Sie den Code unten

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"); 
}); 

Wenn ich die erzeugte Eingabe klicken, um i autsch Echo kann, ist das Ereignis nicht called.please this fiddle zu sehen. Jede Hilfe wird geschätzt. Vielen Dank . dynamisch

Answer 1

Sie Ereignis Delegation benötigen, genau wie Sie es für .remove Klasse klicken wie,

$("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

tat Es ist hinzugefügt, so .on()

Answer 3

$ ("body") .auf ("Klick", ".try", function() {

 alert(" Ouch "); 

}) verwenden;

/** das wird funktionieren. In Ihrem Fall funktionierte es nicht, weil das click -Ereignis nicht mit dem Element verbunden war, weil es danach generiert wurde */