Question

我有一个带有多个li元素的无序列表。最后一个元素有一个on click事件监听器，它将另一个li元素添加到列表中，在这个小提琴中可以看到。

我想要做的是让on click事件始终位于列表的最后一个元素上，即使在我添加了新的li之后也是如此。有干净的方法吗？如果我重新运行

的第2行

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

并且只是取消绑定原始事件它会起作用，但这说起来容易做起来难。

Answer 1

您遇到的问题是您无法将事件处理程序附加到页面加载时DOM中尚不存在的元素。

因此，您需要提升范围，并通过将目标元素作为{的参数传递，将事件处理程序附加到未动态生成的元素 delegating 该功能{1}}。

在这种情况下，您可以将其附加到on()。您可以使用CSS <ul>伪选择器找到最后一个元素：

:last

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

希望这有帮助！：）

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 ，而是使用 Vainilla 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并检查它是否是在添加新项目之前被点击的最后一个孩子。

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

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

3 个答案: