Question

以下简单的html页面没有响应，因为它应该点击“click”或“隐藏所有段落”按钮。我已经包含了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按钮。

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

简单的jquery（DOM）.click（）函数不起作用

3 个答案: