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

Question

So I made this overlay function, and I've also made it close on click on the overlay its self. Problem is I bind the click event every time I run the function ( $overlay.click(function() {...} ), and I think this is bad for performance. Any ideas?

 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

If you absolutely have to keep the click event in the function then use .on() and .off() and then define .off("click") before you define on("click") like this:

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

This will remove the event binding before it adds it.

You can even namespace the click event like this so it only removes that instance of click (in case other events get added elsewhere):

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

Or...

...do as Guruprasad Rao suggests and move it out of the function (which is a much better way of handling it).

Answer 2

An alternative implementation uses jQuery's .on() method combined with event delgation . What his means is you allow the click event to bubble up through the DOM to a parent element that will always be there that will capture and process the event rather than having to rebind it to the dynamic element everytime it's created.

This would look something like

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