用于绑定到动态 HTML 的 .on(） 方法不起作用

the .on() method for binding to dynamic html is not working

本文关键字：方法 不起作用 on 绑定 动态 HTML 用于      更新时间：2023-09-26

-下面的锚标记通过JS添加到页面中。

-绑定事件时，容器div #sC 就在那里。

- 使用 jQuery 1.7.2

- 没有语法错误，没有控制台错误。

-是的，JS包装在脚本标签中，内容在正文中，没有标记警告或错误。

-我唯一能想到的是：这些链接附加了另一个事件，即使在我的代码正常工作后，它仍然一直有效。但是，我找不到它来自哪里（devtools 和 firebug 真的没有指示它附加在哪里，它指向 jQuery 库的第 1 行......

$(document).ready(function() {
    $('#sC').on('click','a', function(event) {
            alert("POOP");
    });
});
<div id="sC">
    <a href="javascript:return false">A</a>
    <a href="javascript:return false">B</a>
    <a href="javascript:return false">C</a>
    <a href="javascript:return false">D</a>
    <a href="javascript:return false">E</a>
    <a href="javascript:return false">F</a>
</div>

更新也尝试了这个：

<div id="sC">
    <a href="javascript:return false">A</a>
    <a href="javascript:return false">B</a>
    <a href="javascript:return false">C</a>
    <a href="javascript:return false">D</a>
    <a href="javascript:return false">E</a>
    <a href="javascript:return false">F</a>
</div>

这也不起作用（???）：

$(document).ready(function() {
    $('#sC').on('click','.scenarios', function(event) {
        alert("POOP");
    });
});
<div id="sC">
    <span class="scenarios">A</span>
    <span class="scenarios">B</span>
    <span class="scenarios">C</span>
    <span class="scenarios">D</span>
    <span class="scenarios">E</span>
    <span class="scenarios">F</span>
</div>

之后，我尝试在控制台中抛出我的 .on（） 函数以查看它是否可以工作（它应该，对吧？不。F*** 你铬控制台）... 在控制台中尝试了这个并喘息它的工作原理：

$('#sC .scenarios').click(function(event) {
    alert('f*** this s***');
});

问题是你从内联处理程序返回false，防止它冒泡到#sC处理程序。

请尝试改用javascript:void(0)：

<div id="sC">
    <a href="javascript:void(0)">A</a>
    <a href="javascript:void(0)">B</a>
    <a href="javascript:void(0)">C</a>
    <a href="javascript:void(0)">D</a>
    <a href="javascript:void(0)">E</a>
    <a href="javascript:void(0)">F</a>
</div>

您是否尝试过在没有 on 的情况下使用 click 处理程序？ 这行得通吗？（用于调试目的）。

此外，我倾向于始终将我的on处理程序绑定到文档本身 - 因为这在页面加载时始终存在，但是如果页面加载时#sC应该没有问题，因为您在ready函数中绑定on。

查看下面的代码是否适合您：

$(document).ready(function() {
    $(document).on('click','#sC a', function(e) {
            e.preventDefault();//this will stop the page navigating away
            alert("POOP");
            //if after you do something then want to continue navigating the page
            //from the anchors `href`
            window.location = $(this).attr('href');
            return false;//I always tend to return false
    });
});
相关文章：