simple jquery (DOM).click() function not working

Question

The following simple html page is not responding to as it should when click on either "click" or "hide all paragraphs" button.I have included jquery lib "jquery-1.9.1.min.js" and I can see its all content in Firefox's 'view source page' by click it.This file's url in my browser is:mylocalhost:8080/ajaxAppJquery/tryAjax.jsp.Using 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>

When i click on #button it does not alert the message.Actually I am experimenting with jquery-ajax but it is not working with #hide button also.

Adil · Accepted Answer · 2013-04-02 06:54:37Z

2

You are accessing the html elements in script before they are available, You should put the script in document.ready or put the script just before the closing body tag

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

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

answered Apr 2, 2013 at 6:54

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adil Over a year ago

No worries, Some time we miss simple things.

Eli · Accepted Answer · 2013-04-02 06:55:12Z

1

Wrap your jquery code inside $(document.ready(function() {}) or $(function() {}); to let it see the whole 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();
     })
});

answered Apr 2, 2013 at 6:55

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Comments

Kirill · Accepted Answer · 2013-04-02 06:57:54Z

1

try to bind event after DOM ready

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

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

answered Apr 2, 2013 at 6:57

Kirill

195 bronze badges

Collectives™ on Stack Overflow

simple jquery (DOM).click() function not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related