如何避免每次運行函數時都設置點擊綁定事件

Question

因此，我做了這個疊加功能，並且也點擊了疊加本身就使其關閉。 問題是我每次運行函數（ $overlay.click(function() {...} ）時都綁定click事件，我認為這樣做對性能不利。

 function fluidOverlayShow(action, currentElement) { var $overlay = $('#fluid-overlay'); if (action == 'open') { $overlay.click(function() { emgFluidOverlayShow('close', currentElement); }); $(currentElement).addClass('fluid-bring-front'); $overlay.addClass('fluid-anim-overlay'); $overlay.data('statuson', true); } else if (action == 'close') { $overlay.removeClass('fluid-anim-overlay'); $overlay.data('statuson', false); $('.fluid-header').find('.fluid-bring-front').removeClass('fluid-bring-front'); } } $('#overlay_test').mouseover(function() { fluidOverlayShow('open', '#overlay_test'); }); $('#overlay_test').mouseout(function() { fluidOverlayShow('close'); }); 

 #fluid-overlay { display: none; opacity: 0.3; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; z-index: 1000; } #overlay_test { position: relative; } #fluid-overlay.fluid-anim-overlay { display: block; -webkit-animation: fade-in-overlay 0.2s 1; -moz-animation: fade-in-overlay 0.2s 1; animation: fade-in-overlay 0.2s 1; } .fluid-bring-front { z-index: 1100; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="javascript:;" id="overlay_test">Overlay test</a> <div id="fluid-overlay"></div> 

Answer 1

如果你絕對要保持click事件中的函數，然后使用.on()和.off()然后定義.off("click")定義之前on("click")是這樣的：

$overlay.off("click").on("click", function() {
  emgFluidOverlayShow('close', currentElement);
});

這將在添加事件綁定之前將其刪除。

您甚至可以像這樣對click事件進行命名空間，以便僅刪除該click實例（以防其他事件添加到其他位置）：

$overlay.off("click.fluidOverlayClose").on("click.fluidOverlayClose", function() {
  emgFluidOverlayShow('close', currentElement);
});

要么...

...按照Guruprasad Rao的建議進行操作，然后將其移出函數（這是處理它的更好方法）。

Answer 2

另一種實現方式是將jQuery的.on()方法與事件派發結合使用 。 他的意思是，您允許click事件通過DOM冒泡到達父元素，該父元素將始終存在，該父元素將捕獲並處理該事件，而不必在每次創建時將其重新綁定到動態元素。

這看起來像

 $("body").on("click","#fluid-overlay",function() {
     //code goes here
    });