PreventDefault不起作用

Question

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

Answer 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.

Answer 2

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.

Answer 3

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.