Ereignis-Listener auf dem letzten Element der Liste behalten

Question

Ich habe eine ungeordnete Liste mit mehreren li-Elementen darin. Das letzte Element hat einen On-Click-Ereignis-Listener, der ein weiteres li-Element zu der Liste hinzufügt, die in dieser Geige zu sehen ist.

https://jsfiddle.net/45vyLdra/

Was will ich zu tun haben, die auf Klick-Ereignis immer auf dem letzten Element der Liste, auch nachdem ich den neuen li angefügt haben. Gibt es einen sauberen Weg, dies zu tun? Wenn ich wieder laufen Linie 2 von

$(document).ready(function() { 
    $("li").last().on("click",function(){ 
     $("ul").append("<li><a href='#'>Button</a></li>") 
    }) 
}) 

und nur das ursprüngliche Ereignis unbind es funktionieren würde, aber das scheint leichter gesagt als getan.

Answer 1

Das Problem, das Sie haben, ist, dass Sie einen Event-Handler nicht an ein Element anhängen können, das noch nicht im DOM beim Laden der Seite vorhanden ist.

Als solche müssen Sie den Umfang hissen, und befestigen Sie den Event-Handler auf ein Element, das nicht dynamisch generiert wird, delegating die Funktionalität durch das Zielelement als Parameter von on() vorbei. In diesem Fall können Sie es an die <ul> anhängen. Sie können das letzte Element mit dem CSS :last pseudo-Wähler finden:

$(document).ready(function() { 
 
    $("ul").on("click", "li:last", function() { 
 
    $("ul").append("<li><a href='#'>Button</a></li>") 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Button</a></li> 
 
    <li><a href="#">Button</a></li> 
 
    <li><a href="#">Button</a></li> 
 
</ul>

hoffe, das hilft! :)

Answer 2

Wenn das letzte Element immer das gleiche sein könnte, könnten Sie prepend statt 10 verwenden. Check it out:

$(document).ready(function() { 
 
    $('li').last().on('click', function() { 
 
    $('ul').prepend('<li><a href="#">Button</a></li>') 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Button</a></li> 
 
    <li><a href="#">Button</a></li> 
 
    <li><a href="#">Button</a></li> 
 
</ul>

Sie könnten vermeiden jQuery überhaupt und verwenden Vainilla JavaScript statt:

document.querySelector('li:last-child').addEventListener('click',() => { 
 
    const template = document.createElement('template'); 
 
    template.innerHTML = '<li><a href="#">Button</a></li>'; 
 

 
    document.querySelector('ul').prepend(template.content); 
 
});

<ul> 
 
    <li><a href="#">Button</a></li> 
 
    <li><a href="#">Button</a></li> 
 
    <li><a href="#">Button</a></li> 
 
</ul>

Hinweis: In diesem Beispiel verwende ich arrow functions (eine ES6 Funktion)

Answer 3

Fügen Sie den Listener zu der ul hinzu und überprüfen Sie, ob es das letzte Kind ist, das geklickt wurde, bevor Sie das neue Element hinzufügen.

var growingList = document.getElementById('the-list'); 
 

 
growingList.addEventListener('click', addToList, false); 
 

 
function addToList(event) 
 
{ 
 
    event = event || window.event; 
 
    
 
    var theList = document.getElementById('the-list'); 
 
    var listItems = theList.children; 
 
    var lastItem = listItems.length - 1; 
 
    
 
    if (event.target === listItems[lastItem]) { 
 
    var htmlToAdd = '<li>' + (lastItem + 2) + '</li>'; 
 
    theList.insertAdjacentHTML('beforeend', htmlToAdd); 
 
    } 
 
}

<ul id="the-list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>