• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Click event not working in jQuery

 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I have just started to learn JQuery using Headfirst. I tried following code in order to hide all paragraphs on a button click, but thats actually not happening.



Please point out where am going wrong here.
 
Matthew Brown
Bartender
Posts: 4565
8
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Have a look at the error console. Are you getting any errors? The first thing you want do is make sure that the jQuery library is getting loaded.

If it is, and there are no errors, then the next thing I'd be trying to confirm is which part is failing to fire? Is it the document ready handler? Or the onclick event? Or is that being fired but just not having the effect you want?
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Since am starting to learn JQuery, I do my coding with a text editor. I haven't explored on how to see errors in console. I am sure, Jquery library is getting loaded. I am not sure if to use consoles during initial stages of learning.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64620
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
All of the modern browsers have JavaScript debuggers (with error consoles) that you need to learn how to use now. It's almost impossible to debug Javascript or jQuery issues without one.

Learn how to use your browser's debugger before writing one more line of code.
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

Just installed FireBug plugin and tried it. I couldn't any error on the console.

Please let me know, what further information you need .
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64620
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You claim that jQuery is loading correctly. I say that it is not. In fact, I claim with 100% certainty that jQuery is not loading in your page.

Prove to me that your claim is correct.
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I could see the jquery.js script in the console. In addition to it, I replaced the same code with click functionality on paragraph elements, that worked as expected.

So I feel jQuery libraries are loaded .
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You claim that jQuery is loading correctly. I say that it is not. In fact, I claim with 100% certainty that jQuery is not loading in your page


Can you tell me how you say jQuery is not loading. Can you help me with few pointers that I could look for.
 
Michael Matola
whippersnapper
Ranch Hand
Posts: 1817
4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Is the HTML valid?
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What you mean by valid ?
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is not correct


You can not use empty tag notation with script tags.

Eric

 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I had tried already by replacing
<script src="jquery.js"/>

with
<script src="jquery.js"></script>


This one too didn't work.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Works for me: http://jsfiddle.net/WmZ7U/

You have something wrong.

Eric
 
Ashwini Kashyap
Ranch Hand
Posts: 90
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I think the jquery.js path provided is incorrect. May be its not able to find that js file.

Try example Click Event Sample mentioned out here.

Thanks,
Ashwini Kashyap

 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You have something wrong.


Yes. I am just trying to figure out whats wrong.

I think the jquery.js path provided is incorrect. May be its not able to find that js file.


The jQuery libraries seems to be loading.
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I finally got that working. I moved the script tags into head tag. I really wonder if that could be the reason behind it though.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So the sample code above did not match what you were testing and telling us it was broken?

 
Ashwin Sridhar
Ranch Hand
Posts: 277
Flex Oracle Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The code thats working is below.



<!DOCTYPE html>
<html>

<head>
<script src="jquery.js"></script>

</head>
<body>
<p>HI How are you. ? </p>
<p>HI How are you. ? </p>
<p>HI How are you. ? </p>
<p>HI How are you. ? </p>
<button id="myButtonId">Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>

</body>
</html>



If you observe, I have just moved the script tags around.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64620
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There is no need to move the script tags. The script will work correctly if also placed in the head section. Eric's example shows this.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic