DIV onclick 功能不受 JQuery 控制 [重复]

【问题标题】：The DIV onclick function is not controlled by JQuery [duplicate]DIV onclick 功能不受 JQuery 控制 [重复]
【发布时间】：2018-12-19 22:03:04
【问题描述】：

我不明白为什么 JQuery 在以下 html 示例代码中不起作用：

第二个 div 在单击时按预期工作。但是第一个 div 根本无法使用 JQuery。

我从来没有用过JQuery，请帮忙解释一下。谢谢。

<html>
<head>
<script src="jquery.js"></script>
<script language="javascript">
     $(".header_logo").click(function () {
         alert("It doesn't work with JQuery function.");
     });
</script>
</head>
<body>
<div class="header_logo">Click with JQuery</div>
<hr/>
<div style="background-color:gray;" onclick="javascript:alert('It works with Onclick');">Click with Onclick</div>
</body>
</html>

【问题讨论】：

您在页面上存在元素之前运行您的 jQuery 代码。将您的 jQuery 移动到页面的末尾或将其放在文档就绪处理程序中。这里可能有一百个有同样问题的傻瓜。
learn.jquery.com/using-jquery-core/document-ready

标签： jquery

【解决方案1】：

因为 JavaScript 代码在执行之前目标元素存在，所以在执行时这个选择器什么也没找到：

$(".header_logo")

执行目标元素之后的代码：

<html>
<head>
</head>
<body>
    <div class="header_logo">Click with JQuery</div>
    <hr/>
    <div style="background-color:gray;" onclick="javascript:alert('It works with Onclick');">Click with Onclick</div>
    <script src="jquery.js"></script>
    <script language="javascript">
        $(".header_logo").click(function () {
            alert("It doesn't work with JQuery function.");
        });
    </script>
</body>
</html>

或者，如果你真的想要 <head> 元素中的 JavaScript 代码，请将其包装在 document.ready 事件处理程序中，这样它就会等到 DOM 加载完毕后再执行：

$(function () {
    $(".header_logo").click(function () {
        alert("It doesn't work with JQuery function.");
     });
});

【讨论】：