如何避免每次运行函数时都设置点击绑定事件

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