Using onclick attribute and jquery click handler on achor tag making only onclick function calling . can we not have both function as a click handler

Question

I tried to use more than one click handler for anchor tag . One using "Onclick" attribute handler and second using Jquery click handler .

This is my Html file .

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script language="JavaScript" type="text/javascript">
    var count = 0;

    $("a[href*='google']").click(function(){
    count =count +1;
    alert(" google called" +count);
 });

  function clickThis()
   {
     count = count + 1 ;
     alert("its onclick Function call " +count);
   }
 </script> 
</head>

<body >
  <a id="foo" onclick="clickThis();" href="http://google.com">google</a>
</body>
</html>

It is running only "onclick" handler . I have checked that handler is right selecting the same anchor tag . But its click handler is not running .

It might be the case that jquery line would not be getting parsed .But as time of parsing the html in browser . it goes from top to bottom , so for script tag parsing , our jquery line would be parsed as like variable (count) declaration .

So what would be the reason that Jquery Click handler is not getting executed on clicking the URL .

And if it execute then what would be the execution order .

Thanks in Advance.

score 1 · Accepted Answer · answered Jan 20 '12 at 13:37

1

You cannot safely manipulate a page until the document is “ready.” via jqfundamentals

You'll need to wrap your code in a $(document).ready handler:

$(document).ready(function() {
    $("a[href*='google']").click(function(){
        count =count +1;
        alert(" google called" +count);
    });
});

answered Jan 20 '12 at 13:37

chrisn

2,095
15
20

Ok .but again my question is if parsing is done from top to bottom and all the code gets executed when it was not in any function body .Like I tried and count is working without having it inside the ready function . So why is it necessary to put it inside the ready function . 2 . What would be the execution order is decided if i also get more click handler using jquery – Virendra Jan 20 '12 at 13:44
ok right . As this time anchor tag was not parsed . So if we put the jquery below the tag . Would it work . i know this is very bad practice only want to clear the concept . – Virendra Jan 20 '12 at 13:51
It is generally considered better practice to put your script as low in the page as possible. See [this answer](http://stackoverflow.com/a/6026730/1134541) for a short explanation and [this answer](http://stackoverflow.com/a/1795502/1134541) for a more in-depth look. – chrisn Jan 20 '12 at 13:57

score 1 · Answer 2 · answered Jan 20 '12 at 13:39

1

Add the following to $(document).ready():

$("a[href*='google']").click(function(){
    count =count +1;
    alert(" google called" +count);
});

So it becomes:

$(document).ready(function(){
    $("a[href*='google']").click(function(){
        count =count +1;
        alert(" google called" +count);
    });
});

The OnClick event is triggered first followed by the JQuery click event.

answered Jan 20 '12 at 13:39

Sagar Patil

1,938
13
21

if we have more than jquery click handler like $("a[href*='.com']") or $("a[href*='www']") with their own handler then how execution order is decided between them . – Virendra Jan 20 '12 at 13:47
I've added a fiddle here showing what happens when the click event is inside the DOM and outside - http://jsfiddle.net/sCQ8e/. My understanding is that the tag gets parsed and the onClick event processed, and then the DOM is traversed. Since functions can exist and be called outside of the DOM, they get called first. – Sagar Patil Jan 20 '12 at 13:59
Okay .In your jsfiddle code , call 1 is not coming which is outside of Dom but when i placed the same below the anchor tag, it gets called .Means i think using "Parsing Top-to-Down" approach . – Virendra Jan 20 '12 at 19:12
http://jsfiddle.net/86TZu/1/ , here i have updated your code for this .I got the calling sequence Call 2 -> Call 1 -> Call 3 -> Call 4 – Virendra Jan 20 '12 at 19:17

score 0 · Answer 3 · answered Jan 20 '12 at 13:40

You have to include you jQuery handler in $(document).ready....

This code should work:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script language="JavaScript" type="text/javascript">
    var count = 0;
      $(document).ready(function(){
        $("a[href*='google']").click(function(){
        count = count +1;
        alert(" google called" +count);
     });
    });

  function clickThis()
   {
     count = count + 1 ;
     alert("its onclick Function call " +count);
   }
 </script> 
</head>

<body >
  <a id="foo" onclick="clickThis();" href="http://google.com">google</a>
</body>
</html>

Using onclick attribute and jquery click handler on achor tag making only onclick function calling . can we not have both function as a click handler

3 Answers3