禁用/启用所有单击，将鼠标悬停在 div 中的事件上

Question

这是我的代码，在这些所有 href 标记中，其类名都具有单击事件，并且 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);
});

这是我的code

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

Demo