jQuery：last不适用于混合标签

Question

我有html如下所示：

<td id="sample">
    <select>
        <option>
    </select>
    <br/>
    <select>
        <option>
    </select>
    <br/>
//...
</td>

我知道我们应该使用div而不是表，但是我们的整个网页都是以这种方式设计的，因此更改它有点耗时。

我想做的是将事件处理程序添加到上一个select标签的更改中。 我试过： $("#sample > select:last")和$("#sample").find("select).last()但是它们都倾向于在br标签之前找到最后一个select，这意味着第一个一个，我可以在代码中添加一个属性来解决此问题，但这会导致添加一个全局变量和大量代码，是否有更干净的解决方案？

编辑：很抱歉，我无法正确理解我的问题，非常感谢所有评论。 我想我的问题实际上是我将事件处理程序放在我的文档就绪部分中，并在该事件处理程序中附加了更多<select> 。 因此，每次我尝试触发事件时，它总是到达原始的最后一个元素。

我的代码如下：

$('#sample > select:last').on('change', function() {
    $('#sample > select:first').clone().show().appendTo('#sample');
    $("<br/>").appendTo('#sample');
});

但是，尽管我找到了原因，但我仍然对解决它感到困惑。 有什么解决办法吗？

Answer 1

您正在动态创建元素，因此需要动态事件委托：

动态委派的工作方式如下：

 $("staticElement").on("someevent", "dynamicElement", function)

并且用于将事件附加到父项，并以新外观查找最近添加的子项Elements。
解释一下，在执行时，如果将事件直接附加到某些元素上，例如： $(".foo").click(fn)或$(".foo").on("click", fn) ，它将不会被考虑对于稍后添加的.foo元素，因为它们当时不在.foo集合中。
通过将事件分配给静态父项，事件委托将反向搜索接收该事件的子级（与选择器参数匹配，并且是同一事件通过event.target的发起方）。

在您的示例中：

// static Parent // evt ,    dynamic 
$("#sample").on("change",   "> select:last",   function() {
    $('#sample > select:first').clone().show().appendTo('#sample');
    $("<br/>").appendTo('#sample');
});

有关您的问题的更多详细信息，请访问： http : //api.jquery.com/on/#direct-and-delegated-events