禁用/启用div中的所有点击，鼠标悬停事件

Question

这是我的代码，在所有这些href标签中都有其类名的click事件，而img也有鼠标悬停在工具提示事件上。 我想在单击名为“编辑”的按钮时禁用所有这些事件。

<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>

正在尝试的是：

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

我想在取消按钮中启用所有事件：

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

这是我的代码

Answer 1

您可以将事件处理程序委派给一个公共的父对象，然后按以下步骤绑定/取消绑定它：

$(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");
  });
}

演示