Question

我不明白为什么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>

Answer 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>

或者，如果您确实希望将JavaScript代码放在<head>元素中，请将其包装在document.ready事件处理程序中，以便它等待直到DOM加载后再执行：

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

DIV onclick函数不受JQuery的控制

1 个答案: