为什么这个 jQuery 点击功能不起作用？

Question

代码：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

上面的代码不起作用。当我单击#clicker 时，它不会发出警报，也不会隐藏。我检查了控制台，没有收到任何错误。我还检查了 JQuery 是否正在加载，确实如此。所以不确定是什么问题。我还做了一个带有警报的文档准备功能，并且该功能有效，因此不确定我做错了什么。请帮忙。谢谢！

Answer 1

您应该在 $(document).ready(function() {}); 块中添加 javascript 代码。

即

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

正如jQuery documentation 所说：“在文档“准备好”之前，无法安全地操作页面。jQuery 会为您检测到这种准备状态。包含在$( document ).ready() 中的代码只会在页面文档对象模型中运行一次(DOM) 已准备好执行 JavaScript 代码”

Answer 2

我找到了解决这个问题的最佳解决方案，方法是使用 ON 和 $(document)。

 $(document).on('click', '#yourid', function() { alert("hello"); });

id 开头如下：

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

最后 1 周后我不需要添加 onclick 触发器。 希望对很多人有帮助

Answer 3

您的代码可以在没有 document.ready() 的情况下工作，只需确保您的脚本位于 #clicker 之后。查看此演示：http://jsbin.com/aPAsaZo/1/

准备好的概念中的想法。如果您确定您的脚本是页面中的最新内容，或者位于受影响的元素之后，它将起作用。

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

注意： 在jsbin 演示中，将代码中的http 替换为https，或使用此变体Demo

Answer 4

尝试将$(document).ready(function(){ 添加到脚本的开头，然后添加});。另外，div 中是否有正确的 id，即作为 id，而不是类等？

Answer 5

你必须用$(document).ready(function(){});包装你的Javascript代码看JSfiddle。

JS 代码：

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});

Answer 6

确保您的按钮（例如 div 或透明的 img）上没有任何东西阻止点击该按钮。 这听起来很愚蠢，但有时我们认为 jQuery 无法正常工作，所有这些都是问题，问题在于 DOM 元素的定位。

Answer 7

您可以使用$(function(){ // code });，它在文档准备好执行该块内的代码时执行。

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

Answer 8

快速检查一下，如果您使用的是客户端模板引擎，例如把手，您的 js 将在 document.ready 之后加载，因此不会有元素可以绑定事件，因此要么使用 onclick 处理程序，要么使用它在身体上并检查当前目标

Answer 9

适当的浏览器重新加载

如果您将 js 文件分开保存，也请快速检查一下：确保正确重新加载您的资源。浏览器通常会缓存文件，因此只需确保在您加载的资源中纠正了以前的拼写错误。

请参阅this answer，了解 Chrome/Chromium 中的永久缓存禁用。否则，您通常可以使用 this answer 中提到的 Ctrl+F5 或 Shift+F5 强制完全重新加载.