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

您可以将事件处理程序委托(delegate)给一个共同的父级并按如下方式绑定(bind)/取消绑定(bind):

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