CODEWITHSUNDEEP
javascriptjqueryinternet-explorerinternet-explorer-8
raddevon
raddevon

Reputation: 3340

Simple jQuery click event bind not working in IE8

This seems to work in nearly every browser except IE8 (and probably IE7, but I haven't tried that yet), and I'm not sure why.

$('body')
    .on('click', '.toggle', function(e){
        $(this).toggleClass('active');
        e.preventDefault();
        e.stopPropagation();
    });

I notice when I click a link classed toggle, the browser goes to the page top despite the e.preventDefault(). In looking into the problem, I've seen solutions like returning false or setting event.returnValue = false. I've tried both of these by first testing for e.preventDefault() then executing the alternative if the condition is not met.

Setting return value:

$('body')
    .on('click', '.toggle', function(e){
        if (e.preventDefault()) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        $(this).toggleClass('active');
    });

I've also tried that one by setting returnValue on the global event object rather than the e passed into the bound function as was suggested in one post.

My attempt returning false:

$('body')
    .on('click', '.toggle', function(e){
        if (e.preventDefault()) {
                e.preventDefault();
            }
        $(this).toggleClass('active');
        return false;
    });

Despite all these different attempts, IE8 is taking the link's default action and is not toggling the class. What am I doing wrong here? I'm using jQuery 1.10.2.

Update: Got to the root of the issue. Thanks, everyone, for the help. I had conditionally included some script elements for non-IE, and this script was one of them. Returning false is doing the trick for me now. Thanks so much for pushing me in the right direction!

Upvotes: 3

Views: 14789

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55613

There's an error in your JS somewhere other than here - it's halting execution and therefore your event handler never gets bound.

Open up dev tools (F12) and refresh your page and you'll see a script error. This is what's causing the problem.

Also, remember that

e.preventDefault();
e.stopPropagation();

is the same as 

return false;

It's also kind of strange to stopPropagation() and an event handler that's bound to the body element anyway, although I guess it will stop the event from bubbling up to the document...

EDIT #2

There's one of 3 things going on - 1) there's an error in your code somewhere else that halts execution and the handlers don't get bound, 2) there's an error in your code inside the event handler (there's not from what you posted) or 3) you unbind this event handler (or all event handlers on the body element) specifically in IE8 (unlikely).

Start adding some console.log's to figure out which one of the above is causing your problem.

To be perfectly clear, your event handler should look like this:

$('body').on('click','.toggle',function(e) {
     e.preventDefault();
     $(this).toggleClass('active');
});

Upvotes: 3

matewka
matewka

Reputation: 10148

In IE8 event object doesn't have preventDefault method. Calling it in your code shall give you such error in console:

TypeError: Object #<MouseEvent> has no method 'preventDefault'

This error causes the script to stop immediately so the anchor can do its primary job which is follow the href. Instead of that use:

$('body').on('click', '.toggle', function(e){
    $(this).toggleClass('active');
    return false;
});

Upvotes: 2

Related Questions