Tamizharasi
Tamizharasi

Reputation: 59

Disable/Enable all click,mouse over events in div

Here is my code, in these all href tag having click event by its class name, and img also have mouse over tooltip event. i want disable all these events when click a button its called edit.

<div style="float:right" class="user_athen_container">
   <a href="#" id="addop" style="margin:10px 3px;overflow:auto;float:right;" title="Add Opportunity" rel="tooltip"><img src="images/add_op.png"></a>
   <a href="#" id="addcus" class="show_add_cust" style="margin:10px 3px;overflow:auto;float:right;" title="Add Customer" rel="tooltip"><img src="images/add_cusomer.png"></a>
   <a href="#" id="addso" style="margin:10px 3px;overflow:auto;float:right;" title="Add SO" rel="tooltip"><img src="images/add_so.png"></a>
   <img src="images/view_submission_icon.png" class="view_file" title="View Log Submission Policy" rel="tooltip" style="margin: 10px 3px; overflow: auto; float: right;">
</div>

What am trying is :

$(document).on('click', '#btn_edit', function(e) {
       $('.user_athen_container').prop('disabled', true);
});

And i want to enable all events in cancel button :

$("#canceledit").click(function() {
     $('.user_athen_container').prop('disabled', false);
});

Here is my code

Upvotes: 0

Views: 1451

Answers (1)

T J
T J

Reputation: 43156

You can delegate the event handlers to a common parent and bind/unbind it as follows:

$(document).ready(function(){

  $("#btn_edit").click(function () {
    $('.user_athen_container').off();
  });

  $("#canceledit").click(function () {
    bindEvents()
  });

  bindEvents()
});

function bindEvents(){
  $('.user_athen_container').on("mouseout",".view_file",function () {
    $(".view_file").css("background-color", "lightgray");
  });
  $('.user_athen_container').on("click","#addso",function () {
   alert("ADDSO PROCESS");
  });
  $('.user_athen_container').on("click","#addop",function () {
  alert("ADDOP PROCESS");
  });
}

Demo

Upvotes: 1

Related Questions