How to remove any jQuery action bound to a click event?

Question

On my wordpress website i have a calendar page managed by a plugin installed which has some basic links in it <a class="mylink" href="http://myurl.com">Some text</a>.

Somewhere in that plugin there is some Javascript code that once the user clicks on one of those links triggers an AJAX call. Well, I don't want this to happen. And, of course, i don't want to edit the plugin core files.

What i want to do is to simply create a script that removes any action bound to those links so that once the user clicks on one of those links nothing happens. So, i tried with jQuery methods preventDefault(), stopPropagation() and stopImmediatePropagation(), but none of them worked.

jQuery(document).on('click','.mylink', function(event){
    event.preventDefault();
    event.stopImmediatePropagation();
    event.stopPropagation();
    //do the stuff i want here
});

What am i missing?

Try `$('.mylink').off('click')` after you instantiate the plugin. — Rory McCrossan, Apr 07 '16 at 14:15
If the plugin binds the click with some namespace, such as $(el).on('click.namespace',function(){}). You will need to know that click.namespace to unbind it. — Hoyen, Apr 07 '16 at 14:27

score 2 · Answer 1 · answered Apr 07 '16 at 14:16

2

Much like the on() function can be used to wire up events, you can use the off() function to remove the event handlers :

$(document).off('click','.mylink');

You'll just need to ensure that this is performed after your initial event handler was created.

answered Apr 07 '16 at 14:16

Rion Williams

69,631
35
180
307

I've put that code at the end of the page, before
, but it doesn't seem to work. Maybe you may find helpful to look at the page? http://autodromodifranciacorta.it/calendario/2016-04/ The links are "<< marzo" and "maggio >>" at the bottom of the page
– Alberto Fontana Apr 07 '16 at 14:24
Based on the mark-up within your page, it looks like your `` tags are actually beneath a section in your plugin, so the previous suggestion might not be targeting them properly. I suppose you could try something like `$('#tribe-events-footer a').off('click');` or `$(document).off('click',#tribe-events-footer a');` to see if either of those work. – Rion Williams Apr 07 '16 at 14:33
@AlbertoFontana If you disable the click events. How do you plan on switching to the next calendar? The entire link would be disabled. – Hoyen Apr 07 '16 at 14:35
@Hoyen this way: `window.location.href = jQuery(this).find("a").attr("href");`. I don't load the calendar on the page, but i load the new one. The reason is because there is a bug in the translation plugin and this is the easiest way to fix it. – Alberto Fontana Apr 07 '16 at 14:37
@RionWilliams none of them is working :( – Alberto Fontana Apr 07 '16 at 14:38
@AlbertoFontana But you are disabling the click event and thus you won't be able to trigger any JavaScript code either. – Hoyen Apr 07 '16 at 14:39
@Hoyen so how do i unbind the existing click events and then apply a new one? – Alberto Fontana Apr 07 '16 at 14:41

score 1 · Answer 2 · answered Apr 07 '16 at 14:16

1

In your code you're just adding another handler for the click event, not replacing the original handler(s). You need to unbind click events on those links. The code to do this:

jQuery('a.mylink').unbind('click')

answered Apr 07 '16 at 14:16

Alex Polkhovsky

3,208
5
26
36

How to remove any jQuery action bound to a click event?

2 Answers2