0

I am trying to use a preventDefault action on some hyperlinks to prevent them being activated, instead calling some ajax. However it doesn't seem to work.

The code I am using is as follows: I have the following code:

    $("#" + container_id + " a[id^=read_more_link]").click(function(event){
        alert($(this).html());
        event.preventDefault();
});

Now what is interesting is the alert box fires so its definitely registering the click event, however it does not seem to recognise the preventDefault() call.

I tried a simple test simplifying my code and it still does not work:

<a id="read_more_link" data-article_id="1" href="news/1">Read More</a>

    $("#read_more_link").on("click", function(event){
        alert("test");
        event.preventDefault();
    });

Alert box fires but then page follows the link still.

Note: It works If I use 'Return False' but not with preventDefault

7
  • 1
    How do you think preventDefault call should be recognised? Your code looks fine.
    – VisioN
    Dec 19, 2012 at 19:02
  • 3
    Can you show your related markup? It is possible that your attribute selector is wrong. Dec 19, 2012 at 19:02
  • 2
    I would just add that if you put some valid value in the 'href' attribute of the anchor and the anchor doesn't take you to that url once clicked, it is working properly. Dec 19, 2012 at 19:06
  • 2
    Are you still being taken to the destination in the link? Please explain "doesn't work."
    – Evan Davis
    Dec 19, 2012 at 19:08
  • Works for me: jsfiddle.net/yP7BA
    – gen_Eric
    Dec 19, 2012 at 19:14

3 Answers 3

1

It seems that you are preventing the default action of the link which has some parent, then your selector should be like this:

my html is:

<p id='aaa'>
   <a id='read_more_link' href='#'>adf</a>
</p>

the jquery:

var container_id = $('#aaa');
$("a[id^='read_more_link']", container_id).click(function(event) {
   alert($(this).html());
   event.preventDefault();
});

Checkout the fiddle: http://jsfiddle.net/EEZEe/

see if this help you out.

1

Here you are!

function(e){
    e = e || window.event;
    e.preventDefault();    
}

Fiddle: http://jsfiddle.net/rXCcB/2/

Edit: As 11684 correctly pointed out, a detailed explanation would be helpful.

Some browsers recognize e as a window.event, which contains all the information on an event; in this case, the click event you're trying to manipulate. A few other browsers don't, so what happens at the first step in the function is a normalization across all browsers on the definition of e. End result is that every reference to e points to window.event, at which point you can safely use e.preventDefault(), knowing that all browsers understand exactly what you mean.

4
  • 3
    Perhaps add an explanation so future readers could learn a bit more? Using code you don't understand seems to me a bad practice.
    – 11684
    Dec 19, 2012 at 19:12
  • 5
    jQuery normalizes the event, this is not needed.
    – gen_Eric
    Dec 19, 2012 at 19:12
  • I see. I don't use libraries so I'm not aware of the auto-magic that jQuery uses for its functions. Provided a library-agnostic method, for question author's benefit though.
    – akamaozu
    Dec 19, 2012 at 19:16
  • I normally use 'e' rather event myself but I wanted to make it easier for everyone to understand.
    – Nuvolari
    Dec 19, 2012 at 19:29
1

There is at least one easier, and one better way of doing it:

Easier:

$("#" + container_id + " a[id^=read_more_link]").click(function(){
    alert($(this).html());
    return false;
});

No need to use the event parameter, and no need to call a function.

Better:

Use a button instead of a link:

<p id='aaa'>
   <button id='read_more_link' type='button'>adf</button>
</p>

Then you don't run into this problem, since a button is made for exactly this - events. Links are made for linking, and return false or preventDefault() are, while they may work, workarounds.

6
  • Your jQuery selected might be improved as well. But thats not really the issue here. Dec 19, 2012 at 19:23
  • 1
    Make sure the button isn't in a <form>. It'll try to submit the form (unless you add type="button")
    – gen_Eric
    Dec 19, 2012 at 19:23
  • Exactly. Hence "type='button'". Dec 19, 2012 at 19:24
  • Return false does work but I would prefer to use the proper way.
    – Nuvolari
    Dec 19, 2012 at 19:25
  • 1
    @Nuvolari: return false; is the proper way.
    – gen_Eric
    Dec 19, 2012 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.