CODEWITHSUNDEEP
jquery
Wiki
Wiki

Reputation: 102

how to differentiate the link in jquery?

when i click on the "Google" link in the example4,I am getting 2 alert messages.[It's showing alert3 message also].Please give a solution for this.i tried to differentiate the link in the example4 but no results.I am getting 2 alert messages.

what is wrong with this code.I am newbie in Jquery world.

Jquery code:

//Example 03 - Prevent Default Action of HTML Element 
$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        alert("Example 3 :: The default action of anchor element has been prevented using Jquery");
    });
});

    //Example 04 - Is Default Action Prevented of HTML Element
    $(document).ready(function(){
        $("a.checkaction").click(function(event){
            event.preventDefault();
            alert("Example4 :: Is default action prevented of anchor <a>element :: "+event.isDefaultPrevented());
    });
});

HTML Code:

<!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery -->
<h1 class="header">Example 3  - Prevent default behavior of HTML Element</h1>
<a href="http://www.facebook.com">Facebook</a>

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using jquery -->
<h1 class="header">Example 4  - How to check whether the default action oh html is prevented or not</h1>
<a href="http://www.google.com" class="checkaction">Google</a>

Upvotes: 0

Views: 71

Answers (3)

Barmar
Barmar

Reputation: 780974

You could change the first handler to:

$("a:not(.checkaction)").click(function(e){
    e.preventDefault();
    alert("Example 3 :: The default action of anchor element has been prevented using Jquery");
});

Or you could combine both handlers:

$("a").click(function(e) {
    e.preventDefault();
    if ($(this).hasClass("checkaction")) {
        ...
    } else {
        ...
    }
});

Upvotes: 1

Mike Barwick
Mike Barwick

Reputation: 5367

Try the below.

Please note, you only need to wrap your jQuery functions in one $document.ready() function. Also, you were receiving two pop-ups when you clicked example 4 because you set the jQuery selector to apply to all anchors. I added a example-3 class to the anchor and revised the js to call it. I also used return false; to prevent the default action, versus your way. Cleaner and does the same thing in this case.

JQUERY:

$(document).ready(function(){

    //Example 03 - Prevent Default Action of HTML Element 
    $("a.example-3").click(function(){
        alert("Example 3 :: The default action of anchor element has been prevented using Jquery");

        return false;
    });

    //Example 04 - Is Default Action Prevented of HTML Element
    $("a.checkaction").click(function(){
        alert("Example 4 :: The default action of anchor element has been prevented using Jquery");

        return false;
    )};
});

HTML:

<!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery -->
<h1 class="header">Example 3  - Prevent default behavior of HTML Element</h1>
<a href="http://www.facebook.com" class="example-3">Facebook</a>

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using jquery -->
<h1 class="header">Example 4  - How to check whether the default action oh html is prevented or not</h1>
<a href="http://www.google.com" class="checkaction">Google</a>

Upvotes: 0

Leo
Leo

Reputation: 14820

Mate, the example 3 will hook a click function for all anchor elements in the page (facebook link and google link). Then, example 4 will hook ANOTHER click function for the google link...so the google link will be handled TWICE

Change the code to the following:

jQuery code:

//Example 03 - Prevent Default Action of HTML Element 
$(document).ready(function(){
    $("a[name=fb]").click(function(e){
       e.preventDefault();
        alert("Example 3 :: The default action of anchor element has been prevented using Jquery");
   });
});

//Example 04 - Is Default Action Prevented of HTML Element
$(document).ready(function(){
    $("a[name=gg]").click(function(event){
        event.preventDefault();
        alert("Example4 :: Is default action prevented of anchor <a>element ::       "+event.isDefaultPrevented());
});
});

Html code:

 <!-- Jquery example 03 - Prevent default behavior of HTML element using Jquery -->
<h1 class="header">Example 3  - Prevent default behavior of HTML Element</h1>
<a name="fb" href="http://www.facebook.com">Facebook</a>

<!-- Jquery example 04 - How to check whether the default action oh html is prevented or not using  jquery -->
<h1 class="header">Example 4  - How to check whether the default action oh html is prevented or not</h1>
<a name="gg" href="http://www.google.com" class="checkaction">Google</a>

Hope it makes sense

Leo

Upvotes: 0

Related Questions