Why doesn't jQuery click function work?

Question

  <script>
 $("#btn1").click(function() {
     $("#logpop").hide("slow");
  });

  </script>
<body>

<div id="logpop">
    <div class="logpop_box">
    <div class="form">
    <input class="input_box" name="email" type="text" placeholder="Woosuk"/>                                  <br/><br/>
    <input class="input_box" name="pass" type="password" placeholder="******"/>  <br/>
    <button id="btn1">Login</button>

    </div>
    </div>
</div>

I want to make div disappear when i click the button. but It dose not disappear. Any thought

Place your script somewhere after the btn1 element, yet still within the <body></body>, and it will work. Some people like to put their scripts just before the closing </body> tag. — user1106925
– user1106925, Commented Feb 16, 2012 at 0:40

Jivings · Accepted Answer · 2012-02-16 00:36:55Z

6

Your JavaScript needs to be in a document ready function:

$(document).ready(function() {
  $("#btn1").click(function() {
     $("#logpop").hide("slow");
  });
});

Currently your click handler is executing before the DOM has been created, thus it can't be attached.

answered Feb 16, 2012 at 0:36

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

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

Comments

Ned Batchelder · Accepted Answer · 2012-02-16 00:37:10Z

3

You should register your click handler inside a document-ready block:

$(function(){
    $("#btn1").click(...);
});

Your script is running before the element exists, and so no click handler is registered.

answered Feb 16, 2012 at 0:37

Ned Batchelder

378k77 gold badges583 silver badges675 bronze badges

Comments

nnnnnn · Accepted Answer · 2012-02-16 00:43:44Z

2

Further to what the other answers said, you can't select an element that has not yet been parsed, given that the browser executes inline JavaScript in the order in which it appears while it parses the source document - so at the point your code runs no elements have been parsed. There are two ways to get around this:

Put your code in a $(document).ready() handler (or use an old-school onload event handler).
Move your script block to anywhere after the element(s) it tries to reference. Most people find script blocks in the middle of the document messy, so (unless absolutely necessary) I'd suggest putting it at the end, right before the closing </body> tag.

answered Feb 16, 2012 at 0:43

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Collectives™ on Stack Overflow

Why doesn't jQuery click function work?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related