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
– Gray, Commented Oct 11, 2013 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
– nnnnnn, Commented Oct 11, 2013 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
– user2534466, Commented Oct 11, 2013 at 14:18

Smeegs · Accepted Answer · 2013-10-11 14:12:52Z

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, 2013 at 14:12

Smeegs

9,2346 gold badges46 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

richardstelmach Over a year ago

is there an 'on' equivalent to 'off'. In that you may want to re-enable a click event, previously turned 'off'.

Jose María Vallejo · Accepted Answer · 2016-06-10 10:16:22Z

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, 2016 at 10:16

Jose María Vallejo

811 silver badge1 bronze badge

2 Comments

AaA Over a year ago

doesn't this solution disable mouse scrolling on element?

okainov Over a year ago

Seems like the only solution keeping old onclick content, so you don't need to repeat it again!

nnnnnn · Accepted Answer · 2013-10-11 14:47:50Z

6

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.

edited Oct 11, 2013 at 14:47

answered Oct 11, 2013 at 14:27

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

2 Comments

Robert Baker Over a year ago

How would you enable them after disabling it?

nnnnnn Over a year ago

@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.

Tyler2P · Accepted Answer · 2023-07-19 19:40:14Z

1

Try this:

To disable:

$("#test").css("pointerEvents","none");

To enable:

$("#test").css("pointerEvents","auto");

edited Jul 19, 2023 at 19:40

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jul 16, 2023 at 21:11

Sebastian Demian

111 bronze badge

Comments

Jura Khrapunov · Accepted Answer · 2013-10-11 14:09:29Z

0

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

answered Oct 11, 2013 at 14:09

Jura Khrapunov

1,0246 silver badges15 bronze badges

1 Comment

Jura Khrapunov Over a year ago

Make sure you include the code above AFTER <div id="test"/> is included into DOM. Otherwise use this: $(document).on('click', '#test', function(e) {e.preventDefault();return false;});

arvic.rivera · Accepted Answer · 2013-10-11 14:09:30Z

0

try this:

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

answered Oct 11, 2013 at 14:09

arvic.rivera

6715 silver badges6 bronze badges

2 Comments

arvic.rivera Over a year ago

return false; will work with simple javascript <a href="http://websiteURL/" onclick="javascript:return false;">TEST</a>

nnnnnn Over a year ago

return false also works from jQuery event handlers, as explained in the documentation.

Henk Jansen · Accepted Answer · 2013-10-11 14:16:53Z

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, 2013 at 14:16

answered Oct 11, 2013 at 14:10

Henk Jansen

1,1508 silver badges27 bronze badges

1 Comment

Henk Jansen Over a year ago

@user2534466 Updated my answer following this: stackoverflow.com/questions/209029/…

Ishan Jain · Accepted Answer · 2017-08-22 10:59:40Z

0

You can unbind click event into click event:

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

Try JsFiddle

edited Aug 22, 2017 at 10:59

answered Oct 11, 2013 at 14:21

Ishan Jain

8,22111 gold badges52 silver badges77 bronze badges

1 Comment

AaA Over a year ago

What is handler?

Collectives™ on Stack Overflow

jQuery/HTML - Disable OnClick

8 Answers 8

1 Comment

2 Comments

2 Comments

Comments

1 Comment

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

2 Comments

2 Comments

Comments

1 Comment

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related