简单jquery (DOM).click()函数不能工作

Question

以下简单的html页面在单击“单击”或“隐藏所有段落”按钮时没有做出响应，我在浏览器is:mylocalhost:8080/ajaxAppJquery/tryAjax.jsp.Using Netbeans IDE中单击it.This文件的url，就可以看到jquery“jQuery1.9.1.min.js”中的所有内容。

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

当我单击#按钮时，它不会通知我正在尝试使用jquery的message.Actually，但它也不使用#hide按钮。

Answer 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();
     })    
});

Answer 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();
     })
});

Answer 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();
  })
});