Disable div using Jquery [duplicate]

I have the event onClick=window.location.href = 'some url stored in div.

Div contains images as well as text.

I want to show开发者_如何学Go preview using this div, but want clicking disabled on this div because it is taking to the specified location.

I tried it like this:

("#preview").disabled= true;
("#preview").disabled= 'disabled';
("#preview").children().disabled= true;
("#preview").children().disabled= 'disabled';

But none of this is working in firefox 3.6. Somebody please help to solve this problem.

If you want to disable all the div's controls, you can try adding a transparent div on the div to disable, you gonna make it unclickable, also use fadeTo to create a disable appearance.

try this.

$('#DisableDiv').fadeTo('slow',.6);
$('#DisableDiv').append('<div style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');

$('#preview').unbind('click');

First, why would you use an inline event handler while using a library like jQuery. Do it the unobtrusive way and bind all event handlers with Javascript.

This actually will also help you with your problem, because then you can unbind and rebind an event handler very easily:

function myclick() {
   window.location.href = 'some url';
}

// bind the click event handler
$(function() {
    $('#preview').bind('click', myclick);
});

// unbind the click event handler
$('#preview').unbind('click', myclick);

That way, you can add and remove the functionality, but it won't change any visible change to the div node. You would also have to add a style or css class to let an user know that something changed.

Ref.: .bind(), .unbind()

You should be able to simply do:

// Unbind all click events for all elements
("#preview *").unbind("click");

The other thing you could do is what modals often do with the background: place a non-clickable div on top of the other content.

$("#preview div").onClick = function(){};

Try

$('#the_div_id *').unbind('click');