CODEWITHSUNDEEP
javascriptjquery
Jerad Rutnam
Jerad Rutnam

Reputation: 1546

How to prevent javascript/jquery execution on specific HTML element?

What is the possibility of the $subject?

Just imagine I have a foo html element

e.g.

<div data-toggle="loader">...</div>

and have a jquery function binded to it by default,

e.g.

$(document).ready(function(){
    $('[data-toggle=loader]').loader();
});

So this will change the DOM element to something like,

e.g.

<div data-toggle="loader" class="active" style="height:800px">...</div>

So what I want to do is prevent applying the changes to the foo element, if it has a class name .example. So the catch is, I cannot touch the default execution code. But I can write another function to handle it. That is the problem I'm facing right now. Any possibility of achieving this?

Upvotes: 1

Views: 532

Answers (1)

Mitya
Mitya

Reputation: 34596

Easiest would be to either change the DOM structure, i.e. so the JS no longer finds the element, or overwrite the jQuery plugin with something innocuous. Do this in a script after the plugin script itself has loaded.

jQuery.fn.loader = jQuery.noop; //$.noop is an empty, pointless function

[EDIT]

In light of the OP's comment, the best bet may be to store a clone of the element then replace the original element with it after the plugin has fired.

var
el = $('.some-element'),
clone = el.clone(1, 1);
//some time passes... plugin is called... does nothing to element
el.replaceWith(clone);

Upvotes: 2

Related Questions