jQuery/HTML - Disable OnClick

Question

as the title says I'm trying to disable OnClick for specific

<div id="test" style="display: block; opacity: 0.89;"></div>

this div is loaded from external script which is obfuscated so i cannot see the specific code.

What I have tried to remove this

$("#test").click(function(){ return false});
$("#test").unbind();
$("#test").removeAttr("onclick");
//Suggestions which do not work
$('#test').on('click', function(e) {e.preventDefault();return false;});
$("#test").click(function(event){
event.preventDefault();
});

None of the above work.

EDIT: Solved my problem using .unbind("click"); after the div was created.

a div has no default behavior for onclick, so what are you trying to prevent? Is there more code maybe? — Gray, Oct 11 '13 at 14:08
Is it the only element on the page with that id? And are you trying the above jQuery code _after_ the element is added to the page? — nnnnnn, Oct 11 '13 at 14:15
Thank you nnnnnn, the problem was that i was using my code before the div was created, now i have added .unbind("click"); after its loaded and it works fine :) — user2534466, Oct 11 '13 at 14:18

score 14 · Answer 1 · answered Oct 11 '13 at 14:12

14

You can add off("click");

Fiddle

$(function () {
    $("#test").click(function(){alert('test');});
    $("#test").off('click');

});

this code will demonstrate removing a previously added click event.

answered Oct 11 '13 at 14:12

Smeegs

8,796
5
34
71

4

is there an 'on' equivalent to 'off'. In that you may want to re-enable a click event, previously turned 'off'. – richardstelmach Jul 14 '16 at 12:21

score 8 · Answer 2 · answered Jun 10 '16 at 10:16

8

Simple form, combination jquery with javascript.

// To disable:    

$('#test').each(function (){
    this.style.pointerEvents = 'none'; 
}); 

// To re-enable:
$('#test').each(function (){
    this.style.pointerEvents = 'auto'; 
});

So, you can change the selector for multiple tags

answered Jun 10 '16 at 10:16

Jose María Vallejo

81
1
1

doesn't this solution disable mouse scrolling on element? – AaA Aug 21 '17 at 13:53
Seems like the only solution keeping old onclick content, so you don't need to repeat it again! – The Godfather Aug 16 '18 at 00:09

nnnnnn · Answer 3 · 2013-10-11T14:47:50.830

None of the options you've tried would work if you use them before the div has been added to the page. So be sure to put your code somewhere after the other script that creates the div.

If more than one element had that same id that would also be a problem.

Regarding the individual methods you've tried:

$("#test").click(function(){ return false});
$("#test").unbind();
$("#test").removeAttr("onclick");

The first line will add a new click handler to the element that prevents the default behaviour and stops the event propagating up, but it won't stop other event handlers bound to the element from running - especially if they run before your new handler, obviously.

The second line will remove event handlers that were attached with jQuery, but not handlers attached by other means.

The third line should work to remove an inline onclick attribute if it exists, but not handlers added with jQuery.

Assuming you still can't stop the click behaviour even after ensuring your code runs after the div is added to the page, you could try something like the following:

var $test = $("#test").removeAttr("onclick"),
    $contents = $test.contents().detach();
$test.replaceWith($test.clone(false).append($contents));

Demo: http://jsfiddle.net/A9tmu/3/

The idea there is to replace the element with a clone of itself, because the cloned version (when created with .clone(false)) will not retain event handlers. I'm temporarily detaching the divs contents before cloning so that any child elements will get to keep their event handlers.

@Robert re-enabling a click handler from an external script is an even more fiddly use case than trying to disable it in the first place. You may not be able to if you don't know how the original one was bound. If it was an `onclick` you could save a reference to the original before removing it. If the original used `addEventListener()` I don't think you can get a reference to the existing handler. — nnnnnn, Jul 31 '14 at 23:15

score 0 · Answer 4 · answered Oct 11 '13 at 14:09

0

$('#test').on('click', function(e) {e.preventDefault();return false;});

answered Oct 11 '13 at 14:09

Jura Khrapunov

1,024
6
14

Make sure you include the code above AFTER
is included into DOM. Otherwise use this: $(document).on('click', '#test', function(e) {e.preventDefault();return false;}); – Jura Khrapunov Oct 14 '13 at 06:43

score 0 · Answer 5 · answered Oct 11 '13 at 14:09

0

try this:

$("#test").click(function(event) {
    event.preventDefault();
});

answered Oct 11 '13 at 14:09

arvic.rivera

643
5
6

`return false;` will work with simple javascript `TEST` – arvic.rivera Oct 11 '13 at 14:25
`return false` also works from jQuery event handlers, as explained in [the documentation](http://api.jquery.com/on/). – nnnnnn Oct 11 '13 at 14:28

Henk Jansen · Answer 6 · 2013-10-11T14:16:53.947

0

Try this?

$('#test').unbind('click')

OR

   $( "#test" ).bind( "click", handler );
   $( "#test" ).unbind( "click", handler );

Try this

$( "#test" ).on("click", function () {
  });
$("#test").off("click");

edited Oct 11 '13 at 14:16

answered Oct 11 '13 at 14:10

Henk Jansen

1,092
8
26

@user2534466 Updated my answer following this: http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery – Henk Jansen Oct 11 '13 at 14:15

Ishan Jain · Answer 7 · 2017-08-22T10:59:40.543

0

You can unbind click event into click event:

 $("#test").click(function(){
        $( "#test" ).unbind( "click");
        alert('Jquery/Javascript Event');
    });

Try JsFiddle

edited Aug 22 '17 at 10:59

answered Oct 11 '13 at 14:21

Ishan Jain

7,501
9
45
72

What is `handler`? – AaA Aug 21 '17 at 13:55

jQuery/HTML - Disable OnClick

7 Answers7

Linked