Question

这是我的代码，在这些所有href标签中都有按其类名称的click事件，而且img也有鼠标悬停在工具提示事件上。我想在点击一个名为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>

尝试的是：

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

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

1 个答案:

Demo