Trying to prevent default click and run a function instead

Question

I'm pretty new to JS and jQuery, and I've just gotten enough grasp on basic JS to try some things out in jQuery. So what I'm trying to do here is prevent pages from loading when a link in the main navigation is clicked (and ideally would load the page with ajax instead).

So this is my script so far, and basically nothing is working... in Chrome, the alert shows up and displays the link that was clicked, but Firefox4 seems to ignore my script altogether (Firebug console shows nothing).

Any help is appreciated.

$(document).ready(function(){
$("#navigation a").each(function() {
    $(this).click(function(){
        event.preventDefault();
        loader();
    });
});

});

function loader(){
theLink = event.target;
alert("You clicked: " + theLink);
}

http://stackoverflow.com/questions/970388/jquery-disable-a-link — Evil Pigeon, Aug 02 '11 at 03:34

score 2 · Answer 1 · answered Aug 02 '11 at 03:33

Try updating your code to this

$(document).ready(function(){
    $("#navigation a").click(function(event){
        event.preventDefault();
        loader(event);
    });
});

function loader(event){
    var theLink = event.target;
    alert("You clicked: " + theLink);
}

score 2 · Answer 2 · answered Aug 02 '11 at 03:36

$(document).ready(function(){
    $("#navigation a").click(function(event){
            event.preventDefault();
            loader(event);
        });                

    function loader(event){
    theLink = event.target;
    alert("You clicked: " + theLink);
    }
});

score 1 · Accepted Answer · answered Aug 02 '11 at 03:32

1

you aren't passing in the event object to your click handler. Also, you don't need the .each()as the .click() will enumerate the results of your query and attach a click handler to each of them

try adjusting it to:

$(document).ready(function(){
    $("#navigation a").click(function(e) {
            e.preventDefault();
            loader(e);
        });
    });
});

function loader(e){
    theLink = e.target;
    alert("You clicked: " + theLink);
}

answered Aug 02 '11 at 03:32

Alastair Pitts

19,423
9
68
97

Thanks, still getting familiar with events and passing things to functions. – andyjv Aug 02 '11 at 03:51

score -1 · Answer 4 · edited May 23 '17 at 10:10

-1

Try adding return false at the end of the click function

 $(this).click(function(){
        event.preventDefault();
        loader();
        return false;
    });

and read this event.preventDefault() vs. return false

edited May 23 '17 at 10:10

Community

1
1

answered Aug 02 '11 at 03:33

Jayantha Lal Sirisena

21,216
11
71
92

Trying to prevent default click and run a function instead

4 Answers4