Set item to unclickable and then click

Question

I want the div element not to be clickable, and then set it to clickable after clicking on another element.

So when .case is clicked:

$('.case').click(function() { $('#patient').addClass('active').on('click'); }); 

But how do I set #patient to unclickable in the first case, when I go even further:

 $('#patient').click(function() { alert('clicked'); }); 

Answer 1

 $('#patient').on('click', function() { if ( $(this).hasClass('active') ) { // do whatever when it active. } return false; }); 

If you just want this not to be accepted, you can add this to your css ( pointer-events ):

 #patient { pointer-events: none; } #patient.active { pointer-events: auto; } 

Answer 2

 $('#patient').unbind("click"); 

I hope this works.

Answer 3

Depending on your need (only one or several elements of a dynamic element or not), you can use:

1) Variable to check if the first click on another item is done

 var isActive = false; $('.case').click(function() { isActive = true; }); $('#patient').click(function(){ if(isActive === false) return false; //Your behaviour }); 

2) Define the click function in the click event of the first element

 $('.case').on('click',function() { //Make element clickable $('#patient').on('click',function(){ //Your behaviour }); }); 

Then you can use off to remove the click event

Answer 4

No clicks:

 $("#ElementName").css("pointer-events","none"); 

Clickable:

 $("#ElementName").css("pointer-events","auto"); 

Answer 5

 for first instance..add deactive class to patient div tag... $('#patient').click(function() { if($(this).hasClass('deactive')) return; else //do what you want to do. }); on case click... $('.case').click(function() { $('#patient').removeClass('deactive'); }); 

Answer 6

Use trigger

 $('#patient').addClass('active').trigger('click'); 

LINK: .trigger ()