Question

这些语法之间有什么不同之处请详细解释一下？

$(document).on("click", "#index1", function() {
    $(p).hide();
});
$("#index2").on("click", "#index1", function() {
    $(p).hide();
});
$("#index1").on("click", function() {
    $(p).hide();
});

Answer 1

在第一种情况下，您将点击监听器添加到＆＃34; document＆＃34;，但只有在您点击＆＃34; #index1＆＃34;时才会执行。第二步 - 你将监听器添加到＆＃34; index2＆＃34;只有当你点击＆＃34; #index1＆＃34;它才会被执行。位于＆＃34; #index2＆＃34;内部。在第三种情况下，您只需将监听器添加到＆＃34; index1＆＃34;

Answer 2

首先想象一下网页。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <button id='index1'>click me</button>
    </body>
    </html>

这将有效

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id='index1'>click me</button>
    <script type="text/javascript">
        $("#index1").on("click", function() {
            $(p).hide();
        });
    </script>
</body>
</html>

这不起作用，因为执行脚本时元素不存在。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        $("#index1").on("click", function() {
            $(p).hide();
        });
    </script>
    <button id='index1'>click me</button>
</body>
</html>

但是通过解决它会

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            $(document).on("click", "#index1", function() {
                $(p).hide();
            });
        </script>
        <button id='index1'>click me</button>
    </body>
    </html>

这表示每当在文档上触发click事件时，检查是否在#index1元素上触发了单击。因此，如果元素不存在，则回调附加到文档节点。现在，当对文档触发点击时，它将检查它是否来自#index1

这些语法之间有什么不同之处请详细解释一下？

2 个答案: