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