简单的 jquery (DOM).click() 函数不起作用答案

【问题标题】：simple jquery (DOM).click() function not working简单的 jquery (DOM).click() 函数不起作用
【发布时间】：2013-03-23 09:12:28
【问题描述】：

单击“单击”或“隐藏所有段落”按钮时，以下简单的 html 页面没有响应。我已包含 jquery lib“jquery-1.9.1.min.js”，我可以看到通过单击它在 Firefox 的“查看源页面”中的所有内容。这个文件在我的浏览器中的 url 是：mylocalhost:8080/ajaxAppJquery/tryAjax.jsp。使用 Netbeans IDE。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>Simple Ajax Example</title>
        <script src="jquery-1.9.1.min.js"></script>
        <script>
            $("#button").click(function(){
                alert("working");
                var url="http://localhost:8080/ajaxAppJquery/sayHello.jsp";

                $("#result").load(url);
            });

            $("#hide").click(function(){
                $("p").hide();
            })
        </script>
    </head>
    <body>
        <input id="button" value="click" type="button"/>

        <input id="hide" value="hide all paragraphs" type="button"/>
        <p>paragraph 1</p>
        <p>paragraph 2</p>
        <p>paragraph 3</p>
        <p>paragraph 4</p>
        <p>paragraph 5</p>
        <p>paragraph 6</p>

        <div id="result"></div>
    </body>
</html>

当我单击#button 时，它不会提醒消息。实际上我正在尝试使用 jquery-ajax，但它也不适用于 #hide 按钮。

【问题讨论】：

标签： jquery html ajax

【解决方案1】：

您在脚本中的 html 元素可用之前访问它们，您应该将脚本放在 document.ready 或将脚本放在关闭 body 标记之前

$(document).ready(function(){
    $("#button").click(function(){
         alert("working");
         var url="http://localhost:8080/ajaxAppJquery/sayHello.jsp";
         $("#result").load(url);
     });

     $("#hide").click(function(){
         $("p").hide();
     })    
});

【讨论】：

别担心，有时我们会错过一些简单的事情。

【解决方案2】：

将您的 jquery 代码包装在 $(document.ready(function() {}) 或 $(function() {}); 中，让它查看整个 DOM：

$(document).ready(function(){
    $("#button").click(function(){
        alert("working");
        var url="http://localhost:8080/ajaxAppJquery/sayHello.jsp";

        $("#result").load(url);
     });

     $("#hide").click(function(){
         $("p").hide();
     })
});

【讨论】：

【解决方案3】：

在 DOM 准备好后尝试绑定事件

$(document).ready(function() {
  $("#button").click(function(){
    alert("working");
    var url="http://localhost:8080/ajaxAppJquery/sayHello.jsp";
    $("#result").load(url);
  });

  $("#hide").click(function(){
    $("p").hide();
  })
});

【讨论】：