如何在jQuery中引用一堆刚刚添加的列表项？

Question

如何获得对刚刚附加到ul

的一堆li的引用

说我有一个清单：

<ul id="mylist">
  <li>1</li>
  <li>2</li>
</ul>

现在我在上面的ul中添加了几个li，所以：

$('mylist').append(response);

响应如下：

"<li>3</li>
 <li>4</li>
 <li>5</li>"

我想为新添加的li附加一个点击处理程序，但是如何获得这些li的引用呢？

更新： ul＃mylist位于弹出窗口内，最初不可见，单击另一个按钮时会显示此弹出窗口：

$mybtn.click(function(){
  $('#mylist').show();
});

那么，我在哪里定义“on”处理程序？如果我在按钮单击处理程序中执行它，那么它会多次附加“on”处理程序，对，每次单击按钮时？我不能在页面加载时定义“on”处理程序，因为mylist不可见。

Answer 1

在追加元素之前创建元素。

var els = $(response).appendTo('#mylist')
                     .on("click", function() { /* your code */ });

---

或者，如果它仅适用于处理程序，您可以在ul上设置一个委托处理程序，而不必担心它。

// on page load
$('#mylist').on("click", "li", function() { /* your code */ });

---

// on response
$('#mylist').append(response);

Answer 2

尝试

$('#mylist').on('click', 'li', function() { console.log('whatever'); });

Answer 3

如果要严格访问最后添加的元素，可以通过多种方式遍历它：

你可以去$（“ul＃mylist li：last-child”）或$（“ul＃mylist li：nth-​​child（n）”）或编辑它们，在追加之前添加一个类，所以你可以在视觉上将它们标记为最后添加。