File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Click event not working in jQuery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Click event not working in jQuery" Watch "Click event not working in jQuery" New topic
Author

Click event not working in jQuery

Ashwin Sridhar
Ranch Hand

Joined: Jul 09, 2011
Posts: 272

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.


Ashwin Sridhar
SCJP | SCWCD | OCA
Matthew Brown
Bartender

Joined: Apr 06, 2010
Posts: 4398
    
    8

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

Joined: Jul 09, 2011
Posts: 272

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

Joined: Jan 10, 2002
Posts: 61315
    
  66

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Ashwin Sridhar
Ranch Hand

Joined: Jul 09, 2011
Posts: 272

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

Joined: Jan 10, 2002
Posts: 61315
    
  66

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

Joined: Jul 09, 2011
Posts: 272

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

Joined: Jul 09, 2011
Posts: 272

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

Joined: Mar 25, 2001
Posts: 1747
    
    2
Is the HTML valid?
Ashwin Sridhar
Ranch Hand

Joined: Jul 09, 2011
Posts: 272

What you mean by valid ?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
This is not correct


You can not use empty tag notation with script tags.

Eric

Ashwin Sridhar
Ranch Hand

Joined: Jul 09, 2011
Posts: 272

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
Works for me: http://jsfiddle.net/WmZ7U/

You have something wrong.

Eric
Ashwini Kashyap
Ranch Hand

Joined: Aug 30, 2012
Posts: 90
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

Joined: Jul 09, 2011
Posts: 272

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

Joined: Jul 09, 2011
Posts: 272

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
So the sample code above did not match what you were testing and telling us it was broken?

Ashwin Sridhar
Ranch Hand

Joined: Jul 09, 2011
Posts: 272

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

Joined: Jan 10, 2002
Posts: 61315
    
  66

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.
 
GeeCON Prague 2014
 
subject: Click event not working in jQuery