jQuery on() 仅在 $(document).ready 的主体中声明时触发

Question

我有一个无序列表的段落，当用户单击包含该段落的 li 时，需要在用户单击时显示这些段落。问题是它根本不会被调用，除非它在 ​​$(document).ready() 函数中声明。我什至在 JSFiddle 上试过了(不用注意所使用的语言)它工作得很好，正如预期的那样。

// HTML

<ul id="historyList">
        <li>header text<p>text</p></li>
        // ...
        <li>header text<p>text</p></li>
</ul>

// CSS

#historyList li p
{
    display: none;
}

// JS

$(document).ready(function () {
    revealParagraph();
});

// works just fine
function revealParagraph() {
    $("#historyList").on("click", "li", function (event) {
        $("p", this).show();
    });
}

// simply won't work no matter what I do
$("#historyList").on("click", "li", function (event) {
    $("p", this).show();
});

当我测试代码时，这两个函数中的一个当然被注释掉了。我也有 $(window).scroll() 和 $(window).resize() 并且它们在“悬在空中”时工作得很好。我在这里做错了什么？我正在处理一个 ASP.NET 元素，但这无关紧要，因为这只是客户端代码。

如果需要，我会提供更多信息。

Answer 1

请原谅我的回答，因为我还不能对问题发表评论，因为声誉不高

您的 jQuery/Javascript 代码似乎在您的 head 标记内，并且在 jQuery 初始化之前。这意味着您的代码试图在没有任何 DOM 元素的情况下运行，并且根本没有 jQuery 工作。

使用 jQuery 时，尽量将所有内容都放在 $(document).ready() 中，或者将所有代码放在结束 body 标记之前。