Question

我的html如下所示：

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

我知道我们应该使用div而不是table，但我们的整个网页都是这样设计的，改变它是一件很费时的事情。

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

修改对不起，我没有正确理解我的问题，非常感谢所有评论。我想我的问题实际上是我将事件处理程序放在我的文档就绪部分中，并在该事件处理程序中附加更多<select>。因此，每当我尝试触发事件时，它总是会出现在原来的最后元素中。

我的代码如下：

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

但是虽然我找到了原因，但我仍然很难解决它。这有什么解决方案吗？

Answer 1

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

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

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

它用于将事件附加到父级，并更新最近添加的子元素要解释一下执行时间，如果您将事件附加到某些元素直接，例如：$(".foo").click(fn)或$(".foo").on("click", fn)，则不会占用{{1稍后添加的元素导致它们当时不在.foo集合中。通过将事件分配给静态父级，事件委派将反复搜索接收到该事件的子级（与选择器参数匹配，并且是同一事件的发起者，通过.foo）。

在您的示例中：

event.target

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

jQuery：最后没有使用混合标签

1 个答案: