將事件監聽器保留在列表的最後一個元素上

Question

我有一個無序列表，裏面有多個li元素。最後一個元素有一個點擊事件監聽器，它將另一個li元素添加到列表中，在這個小提琴中看到。

https://jsfiddle.net/45vyLdra/

我想要做的是有上單擊事件始終是列表的最後一個元素上，即使我已追加新麗。有沒有一種乾淨的方式來做到這一點？如果我重新運行線2的

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

，只是解除綁定會工作的原始事件，但似乎說起來容易做起來難。

Answer 1

您遇到的問題是您無法將事件處理程序附加到頁面加載時尚不存在於DOM中的元素。

因此，需要通過將目標元素作爲on()參數葫蘆的範圍，並且該事件處理程序附加到這不是動態生成的元素，delegating的功能。

在這種情況下，您可以將其附加到<ul>。您可以使用CSS :last僞選擇找到最後一個元素：

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

希望這有助於！ :)

Answer 2

如果最後一個元素可能總是相同，則可以使用prepend而不是append。檢查出來：

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

你可能會避免jQuery的在所有和使用拜尼亞的JavaScript代替：

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>

注：在這個例子中，我使用arrow functions（一ES6功能）

Answer 3

的偵聽器添加到UL和檢查它是否是這是增加新的項目之前單擊了最後一個孩子。

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>