时间戳

首页 > 解决方案 > 如何获取创建文档后添加的单击元素的 ID？

javascript - 如何获取创建文档后添加的单击元素的 ID？

问题描述

我得到了一个被点击的 li 的 id，如下所示：

        $("#repository-tabs li").on("click", function(e) {
            alert(this.id);
        });

简单，问题是，我之后动态添加 li 元素：

        $("#add-tab").click(function() {
            tabs = $("#repository-tabs li").length - 1;
            append_at = tabs - 2;
            $("#repository-tabs li:eq(" + append_at + ")").after('<li id="repository-tab-' + tabs + '" class="tab col s3 z-depth-5"><a class="white green-text text-darken-2 waves-effect waves-light" href="javascript:void(0);">Repositório ' + tabs + '</a></li>');
        });

现在，当我单击添加的 li 元素时，不会触发任何事件。那么，如何获取未来点击项目的 ID？

标签： javascriptjquerydom

解决方案

不要将事件直接应用于选项卡元素；相反，将其应用于父级并委托它。

on()有第二个可选参数 ,selector用于过滤触发事件的选定元素的后代。

$("#repository-tabs").on("click", "li", function() {
  alert(this.id);
});

从文档：

委托事件处理程序的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要

推荐阅读