使JQuery识别新添加的元素[重复]答案

【问题标题】：Making JQuery Recognise Newly Added Elements [duplicate]使JQuery识别新添加的元素[重复]
【发布时间】：2013-08-14 11:15:36
【问题描述】：

如何让 JQuery 像对待 html 文件中的原始元素一样对待新元素？例如，考虑以下示例：

<!DOCTYPE html>
<html>
    <head>
        <title>simple click to switch</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $edit = "<div>edit</div>";
            $(document).ready(function () {
                $("div").click(function () {
                    $(this).after($edit);
                    $edit = $(this);
                    $(this).remove();
                });
            });
        </script>
    </head>
    <body>
        <div>switch me</div>
    </body>
</html>

我希望这个 JQuery 块允许我在单击时在 div“切换我”和“编辑”之间切换。但是，结果是，它可以识别原始 div，允许单个“切换”。但是 JQuery 无法识别新添加的 div。 div 只能切换一次。我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery html toggle

【解决方案1】：

对于动态添加的元素，您需要使用事件委托来注册处理程序

$(document).on('click', 'div', function () {
                $(this).after($edit);
                $edit = $(this);
                $(this).remove();
            });

演示：Fiddle

另请阅读this

【讨论】：

非常好。也谢谢你的资源。如果不是太离题，为什么需要“开”功能？ JQuery 不自动允许捕获新元素是否有任何语义或实际原因？
解释为什么会很好
@user2593666 看到我作为重复链接的问题
@user2593666 事件委托处理非动态父节点上的冒泡事件。 jQuery 将处理程序分配给整个文档，当事件触发时，它会检查它是否与您在触发处理程序之前提供的选择器匹配。在您的示例中，您仅在当时存在的元素上设置处理程序