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.

Answer 1

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.

Answer 2

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

Answer 3

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.