将事件监听器保留在列表的最后一个元素上

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>