CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Code Guru
Code Guru

Reputation: 15578

How to enable click functionality of div in javascript or jquery?

I disabled the div by using following code

$("#menuDiv1").children().bind('click', function(){ 
     return false; 
});

menuDiv contains

<ul>
    <li><a class="home" href="#/Dashboard">Dashboard</a></li>
    <li><a class="forms" href="#/ViewLeads">Lead</a></li>
    <li><a class="forms"  href="#/ViewCases/0">Cases</a></li> 


</ul>

but now I want to enable it again. How can I do that?

And is there any other solution for the same in angular js?

Upvotes: 7

Views: 5017

Answers (6)

jme11
jme11

Reputation: 17372

Based on the new information in your question, the proper way to do this in AngularJS is to use the $locationChangeStart event.

Plunker

app.run(function ($rootScope, $location) {
  $rootScope.$on('$locationChangeStart', function (event, next, current) {
    if ($rootScope.menuDeactivated) {
      event.preventDefault();
    }
  });
});

This is a very simplistic example of that sets a variable on the $rootScope, but you could instead run a function (helpful if you want to save form values or prompt the user before changing your route for example) or inject a service (such as if you want to check if a user is logged in), etc.

Upvotes: 0

Nishit Maheta
Nishit Maheta

Reputation: 6031

you can use unbind to remove disable click event 

 $("#menuDiv1").children().unbind('click');

To re enable click event use below code.

  function clickfunc(){
     // your code
  }

  $("#menuDiv1").children().bind('click',clickfunc);

Second option

you can use off to remove disable click event 

$("#menuDiv1").children().off('click');

To re enable click event use below code.

  function clickfunc(){
     // your code
  }

  $("#menuDiv1").children().on('click',clickfunc);

EDIT as discussed below code is avoid click event on a,button tags.

DEMO

function clickfunc(event){
     if(event.target.nodeName === 'A' || event.target.nodeName == "BUTTON"){
      return false;
     }

      // your code
     alert("click")
}

$("#menuDiv1").children().on('click',clickfunc);

Upvotes: 3

Zee
Zee

Reputation: 8488

In Angular you can use ng-click and ng-disabled in combination. For example:

<button ng-click="clicked()" ng-disabled="val">Click</button>

And in controller set the val to true or false to enable/disable click on the button.

$scope.val = true; //To disable button

EDIT:

For div you can do it like this:

 <div ng-click="val || clicked()" ng-disabled="val">Click</div>

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You would either unbind previously bound click event handler, or prevent event conditionally:

$("#menuDiv1").children().bind('click', function (e) {
    if ($(this).hasClass('no-click')) {
        e.stopPropagation();
    }
});

Btw, it's better to use e.stopPropagation(); explicitly to prevent child-to-parent event bubbling, rather than implicit return false.

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

using on/off you can enable or disable click event

Disable click

$("#menuDiv1").children().off('click');

Enable Click

$("#menuDiv1").children().on('click', function(){ 

// do here work

});

Upvotes: 0

Adil
Adil

Reputation: 148120

You can use unbind to disable and bind to enable again.

$("#menuDiv1").children().unbind('click');

To bind it again

$("#menuDiv1").children().bind('click', clickhander);

You better look to use jQuery.on and jQuery.off instead of bind and unbind.

Upvotes: 3

Related Questions