文档准备好没有在页面加载时命中，但它可以使用开发者工具控制台工作答案

【问题标题】：Document ready not hit on page load, but it works using Developer Tools Console文档准备好没有在页面加载时命中，但它可以使用开发者工具控制台工作
【发布时间】：2015-07-07 10:53:25
【问题描述】：

在 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");
    });
});

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

【问题讨论】：

标签： javascript jquery ajax developer-tools

【解决方案1】：

您错过了 . 前缀作为 class 并使用 event delgation 创建动态 dom 元素

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

【讨论】：

OK 使用事件委托
深信不疑:) 那么没有办法将动态添加的项目的类用作jquery选择器吗？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这是因为当你的页面准备好时，ajax 调用还没有完成。你可以试试这个：

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

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

【讨论】：