Wie fügt man Klickereignisse für dynamisch angefügte Elemente mit jquery hinzu?

Question

hier bin ich in der Lage, box100 und box200 zu entfernen, wenn geklickt, aber nicht box1-box5 nach dem Anhängen an die Liste zu entfernen. Wie wähle ich die angehängten Elemente aus?

https://jsfiddle.net/uhmgj8ky/4/

html 
    <ul> 
    <li class='list'>remove box100</li> 
    <li class='list'>remove box200</li> 
    </ul> 
    <div class='box' box='box1'>add box1</div> 
    <div class='box' box='box2'>add box2</div> 
    <div class='box' box='box3'>add box3</div> 
    <div class='box' box='box4'>add box4</div> 
    <div class='box' box='box5'>add box5</div> 

css 
.box{ 
    height:50px; 
    width:50px; 
    border:2px solid blue; 
    display: inline-block; 
} 
ul li{ 
    height:50px; 
    width:50px; 
    border:2px solid blue; 
    display: inline-block; 
    margin-right: 1px; 
} 

jquery 
$('.box').on('click', function(){ 
    var txt = $(this).attr('box'); 
    $('ul').append("<li class='list'>remove "+txt+"</li>"); 
}); 

$('.list').on('click', function(){ 
    $(this).remove(); 
}); 

Answer 1

Sie sollten uns Ereignis Delegation

Ereignis Delegation erlaubt verwenden, um ein einzelnes Ereignis-Listener zu befestigen, an ein übergeordnetes Element, das für alle Nachkommen passend einen Selektor ausgelöst wird, ob diese Nachkommen existieren jetzt oder werden in der Zukunft hinzugefügt. Beide

on() 

und

delegate() 

Funktionen ermöglichen es uns, Veranstaltung Delegation auszuführen.

hinzugefügt, um eine Containerklasse

<ul> 
    <li class='list'>remove box100</li> 
    <li class='list'>remove box200</li> 
    </ul> 
<div class="box-container"> 
    <div class='box' box='box1'>add box1</div> 
    <div class='box' box='box2'>add box2</div> 
    <div class='box' box='box3'>add box3</div> 
    <div class='box' box='box4'>add box4</div> 
    <div class='box' box='box5'>add box5</div> 
</div> 

    $('.box-container').on('click',".box", function(){ 
    var txt = $(this).attr('box'); 
    $('ul').append("<li class='list'>remove "+txt+"</li>"); 
    }); 

    $('ul').on('click','.list', function(){ 
    $(this).remove(); 
    }); 

aktualisieren https://jsfiddle.net/uhmgj8ky/6/

Weitere Informationen über die Veranstaltung Delegation, see video