Skip to content

Instantly share code, notes, and snippets.

@bennadel
Created March 25, 2014 11:06
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bennadel/9759473 to your computer and use it in GitHub Desktop.
Save bennadel/9759473 to your computer and use it in GitHub Desktop.
Enable And Disable jQuery Event Handlers (Rather Than Bind And Unbind)
<!DOCTYPE HTML>
<html>
<head>
<title>Enable And Disable jQuery Event Handlers</title>
<style type="text/css">
#modal {
background-color: #FAFAFA ;
border: 1px solid #C0C0C0 ;
display: none ;
height: 80px ;
left: 50% ;
margin: -51px 0px 0px -151px ;
padding: 20px 20px 20px 20px ;
position: absolute ;
text-align: center ;
top: 50% ;
width: 260px ;
z-index: 100 ;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
// Get a reference to the modal window.
var modal = $( "#modal" );
// This is a variable to determine if the given event
// handler is active or disabled. This will be used
// by the event handler for conditional execution.
var isHandlerActive = false;
// Bind the trigger link to show the modal window.
$( "a" )
.attr( "href", "javascript:void( 0 )" )
.click(
function( event ){
// Show modal window.
modal.show();
// Now that modal window is shown, we need
// to activate its event handler.
isHandlerActive = true;
// Prevent default.
event.preventDefault();
}
)
;
// Bind a mouseUp event on the document so that we
// can close the modal window when it is open.
$( document ).bind(
"mousedown",
function(){
// Check to see if this event handler is
// "active". If it is not, then exit.
if (!isHandlerActive){
return;
}
// Log to console for debugging.
console.log( "Event handled." );
// Close the modal window.
modal.hide();
// Now that the modal window is hidden, we
// need to disable its event handler.
isHandlerActive = false;
}
);
// Bind the mousedown event the modal window so we can
// stop it from bubbling up to the document (ie. you
// should be able to click IN the modal window without
// it closing.
modal.bind(
"mousedown",
function( event ){
event.stopPropagation();
}
);
});
</script>
</head>
<body>
<h1>
Enable And Disable jQuery Event Handlers
</h1>
<p>
<a id="trigger">Show modal window</a>
</p>
<div id="modal">
Hello, this is a modal window.
</div>
</body>
</html>
// Wrap the plugin definition in a callback bubble so we can bind
// it to the dollar sign.
(function( $ ){
// This jQuery plugin creates proxied event handlers that
// consult with an additional conditional callback to see if
// the original event handler should be executed.
$.fn.bindIf = function(
eventType,
eventHandler,
ifCondition
){
// Create a new proxy function that wraps around the
// given bind callback.
var proxy = function( event ){
// Execute the IF condition callback first to see if
// the event handler should be executed.
if (ifCondition()){
// Pass the event onto the original event
// handler.
eventHandler.apply( this, arguments );
}
};
// Bind the proxy method to the target.
this.bind( eventType, proxy );
// Return this to keep jQuery method chaining.
return( this );
};
})( jQuery );
<!DOCTYPE HTML>
<html>
<head>
<title>Enable And Disable jQuery Event Handlers</title>
<style type="text/css">
#modal {
background-color: #FAFAFA ;
border: 1px solid #C0C0C0 ;
display: none ;
height: 80px ;
left: 50% ;
margin: -51px 0px 0px -151px ;
padding: 20px 20px 20px 20px ;
position: absolute ;
text-align: center ;
top: 50% ;
width: 260px ;
z-index: 100 ;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bindif.js"></script>
<script type="text/javascript">
// When the DOM is ready, intialize document.
jQuery(function( $ ){
// Get a reference to the modal window.
var modal = $( "#modal" );
// Bind the trigger link to show the modal window.
$( "a" )
.attr( "href", "javascript:void( 0 )" )
.click(
function( event ){
// Show modal window.
modal.show();
// Prevent default.
event.preventDefault();
}
)
;
// Bind a mousedown event on the document so that we
// can close the modal window when it is open.
$( document ).bindIf(
"mousedown",
function(){
// Log to console for debugging.
console.log( "Event handled." );
// Close the modal window.
modal.hide();
},
function(){
return( modal.is( ":visible" ) );
}
);
// Bind the mousedown event the modal window so we can
// stop it from bubbling up to the document (ie. you
// should be able to click IN the modal window without
// it closing.
modal.bind(
"mousedown",
function( event ){
event.stopPropagation();
}
);
});
</script>
</head>
<body>
<h1>
Enable And Disable jQuery Event Handlers
</h1>
<p>
<a id="trigger">Show modal window</a>
</p>
<div id="modal">
Hello, this is a modal window.
</div>
</body>
</html>
function(){
return( modal.is( ":visible" ) );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment