文档准备好未命中页面加载，但它可以使用开发人员工具控制台

Question

在 Ajax 成功时，li 元素附加到 ul。

$.ajax({
           ..
     success: function (response) {
         response.data.forEach(function (x) {
            $("#ulMain").append('<li class="liSub">' + x + '</li>');
     }
});

它创建这样的东西：

<ul>
  <li class="liSub">ABC</li>
  <li class="liSub">BCF</li>
</ul>

我希望动态添加的 li 元素在单击时触发警告框。但是下面的代码没有被命中。

$(document).ready(function () {
    $(".liSub").on("click", function () {
        alert("Fired");
    });
});

有趣的是，如果我运行代码的 document.ready 部分使用 F12 - 控制台，它就可以工作。是什么让它正常停止运行，并让它通过控制台运行？

Answer 1

因为它是一个动态加载的元素，尝试委托它：

$(document).ready(function () {
    $("body").on("click",".liSub", function () {
        alert("Fired");
    });
});

Answer 2

您错过了 class 的 . 前缀，并使用 事件委托 创建了动态 dom 元素

$("ul").on("click", '.liSub', function () {
     alert("Fired");
});

Answer 3

这是因为当您的页面准备就绪时，ajax 调用尚未完成。你可以试试这个：

$(document).ready(function () {
    $("#ulMain").on("click",".liSub", function () {
        alert("Fired");
    });
});

它将点击绑定到执行时存在的#ulMain，并在点击时将事件委托给.liSub。它只创建一个绑定，这对全局性能也更好。

文档准备好未命中页面加载，但它可以使用开发人员工具控制台

Document ready not hit on page load, but it works using Developer Tools Console

javascript

jquery

ajax

developer-tools