My HTML code is

<a href='someValidLink' class="link">
    <img src='imageUrl'/>
</a>

and js script is

$('.link').click(function(e) {
    console.log("log something");
    return false;
});

Now clicking on the image should not redirect me to new page, but somehow it is

So far i have tried putting same class in img tag, using id instead of class, e.preventDefault instead of just returning false etc...

However if I remove the img node and put some text instead then it is working fine as it should, but what to do for preventing image links from redirecting

My HTML code is

<a href='someValidLink' class="link">
    <img src='imageUrl'/>
</a>

and js script is

$('.link').click(function(e) {
    console.log("log something");
    return false;
});

Now clicking on the image should not redirect me to new page, but somehow it is

So far i have tried putting same class in img tag, using id instead of class, e.preventDefault instead of just returning false etc...

However if I remove the img node and put some text instead then it is working fine as it should, but what to do for preventing image links from redirecting

• javascript
• jquery
• html

• does it log to the console before navigating to the link? – ultranaut Commented Oct 19, 2013 at 19:34
• your code works! or not? - jsfiddle/43vwk – mychalvlcek Commented Oct 19, 2013 at 19:36
• no, i have tried using just # as link, it wasn't logging anything – rockstarjindal Commented Oct 19, 2013 at 19:36
• my code is supposed to log something and prevent redirection but that's not happening if I click on image However if I remove image, put some text instead and then click on text then it is working – rockstarjindal Commented Oct 19, 2013 at 19:38

4 Answers 4

If the HTML is being created dynamically, you cannot use a standard static binding which will only work on elements that exist and can be selected at DOM ready.

$(document).ready(function() {
    $(document).on("click", ".link", function(e) {
        console.log("log something");
        return false;
    });
}

http://api.jquery./on/

jQuery's "on" is the preferred way to handle this.

I am going to guess that the anchor is being dynamically loaded.

Try using the following:

$(document).on("click", ".link", function(){
    console.log("log something");
    return false;
});

This will look for your "link" class at the time of the click as opposed to where the "link" class pointed at when the page initially loaded. Avoid using the "live" listener in place of the "on" listener. It has been deprecated and depending on what version of jQuery you are using, it might not even be available.

The code seems fine. Are you sure this code is not being executed before the element is loaded in the page? Try adding it inside a $(document).ready callback:

$(document).ready(function() {
    $('.link').click(function(e) {
        console.log("log something");
        return false;
    });
}

Found the problem, the a-Tag was created dynamically, so guess I will have to use something different than a simple click function