Wie ein Element zu entfernen, die dynamisch in Javascript hinzugefügt wird

Question

Ich habe den folgenden Code ein Element

<div id="parent"> 
    <div id="block_1" > 
     <div> 
      <input type="text"> 
     </div> 
     <img src="arrow.jpg"> 
     <div> 
      <input type="text"> 
     </div> 
     <div><a href="#" class="remove_block">Remove</a></div> 
    </div> 
</div> 

das Ergebnis so aussehen

zu erstellen Wenn der Benutzer die Taste ADD gedrückt wird es gehen zu einer JavaScript-Funktion und erstellen Sie den gleichen Block von div. Hier ist der Code

function add_block() { 
var curDiv = $('#parent'); 
var i = $('#parent div').size()/4 + 1; 
var newDiv='<div id="block_'+ i + '" class="parent_div">' + 
'<div>' + 
'<input type="text">' + 
'</div>' + 
'<img src="arrow.jpg">' + 
'<div>' + 
'<input type="text">' + 
'</div><div><a class="remove_block" href="#">Remove</a></div>' + 
'</div>'; 
$(newDiv).appendTo(curDiv); 
}; 

, wenn der Benutzer die Taste „Entfernen“ -Link auf der linken Seite des Blocks, dass entsprechende Block entfernt werden sollte. Und das ist, was ich tat:

$('a.remove_block').on('click',function(events){ 
    $(this).parents('div').eq(1).remove(); 
}); 

Das Problem ist, dass nur das Entfernen in der ursprünglichen Block Arbeit, der Rest nicht. Jeder weiß warum?

Ich bin neu in jQuery und JavaScript aktivieren, so dass ich wirklich zu schätzen jede Hilfe und Anregung Hinweis: Ich benutze jQuery 2.0.3

Answer 1

weil es dynamische Inhalte sind, können Sie keine Ereignisse wie die statischen Inhalte binden, wird es nicht an die Elemente binden, weil sie an dem nicht angezeigt werden Zeit, die Sie binden.

Sie sollten also Veranstaltung wie diese binden:

$('#parent').on('click', 'a.remove_block', function(events){ 
    $(this).parents('div').eq(1).remove(); 
}); 

Answer 2

Sie müssen sich für dynamisch hinzugefügte Elemente Ereignis Delegation verwenden. Auch wenn Sie .on() verwendet haben, verwendet die verwendete Syntax keine Ereignisdelegierung.

Wenn Sie ein normales Ereignis registrieren, fügt es den Handler nur jenen Elementen hinzu, die zu diesem Zeitpunkt im Dom vorhanden sind, aber wenn Ereignisdelegierung verwendet wird, wird der Handler in einem Element registriert, das zum Zeitpunkt der Ausführung existiert geben Selektor ausgewertet wird, wenn das Ereignis bis zu dem Elemente perlt

$(document).on('click', '.remove_block', function(events){ 
    $(this).parents('div').eq(1).remove(); 
}); 

Answer 3

Sie die .live dafür verwenden können:

$('body').live('click','#idDinamicElement', function(){ 
    // your code here 
}); 

Answer 4

$('a.remove_block').on('click',function(events){ 
    $(this).parents('.parent_div').remove(); 
    return false; 
});