javascript - jQuery:最后不适用于混合标签

Question

我的 html 如下所示:

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

我知道我们应该使用 div 而不是 table，但我们的整个网页都是这样设计的，更改它有点耗时。

我想要做的是将事件处理程序添加到最后一个选择标签的更改中。我努力了: $("#sample > select:last")和$("#sample").find("select).last()但他们都倾向于在 br 标签之前找到最后一个选择，这意味着第一个选择。我可能可以通过在代码中添加属性来解决这个问题，但这将导致添加全局变量和大量代码。有更清洁的解决方案吗？

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

我的代码如下:

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

虽然我找到了原因，但我仍然对解决它感到困惑。对此有什么解决方案吗？

Answer 1

您正在动态创建元素，因此您需要动态事件委托(delegate):

动态委派的工作原理如下:

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

它用于将事件附加到父元素，并更新最近附加的子元素的外观。
解释一下，在执行时，如果您直接将事件附加到某些元素，例如:$(".foo").click(fn)或 $(".foo").on("click", fn) 它不会考虑稍后添加的 .foo 元素，因为它们不是 当时在 .foo 集合中。
通过将事件分配给静态父级，事件委托(delegate)将冒泡反向搜索接收该事件的子级(与选择器参数匹配并且是通过 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