Skip to content

Instantly share code, notes, and snippets.

@lionhylra

lionhylra/jQuery.on.html

Created September 17, 2013 05:03
Show Gist options
  • Save lionhylra/6590237 to your computer and use it in GitHub Desktop.
Save lionhylra/6590237 to your computer and use it in GitHub Desktop.
Download ZIP
A jQuery way to change the style of element by changing the class
Raw
jQuery.on.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
.test {
color: #000;
padding: .5em;
border: 1px solid #444;
}
.active {
color: #900;
}
.inside {
background-color: aqua;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="test">test div</div>
<script>
$( "div.test" ).on({
click: function() {
$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
</script>
</body>
</html>
Raw
jquery.on.previous.version.js
$( "a.offsite" ).live( "click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).delegate( "a.offsite", "click", function() {
alert( "Goodbye!" ); // jQuery 1.4.3+
});
$( document ).on( "click", "a.offsite", function() {
alert( "Goodbye!" ); // jQuery 1.7+
});
Raw
jquery.on2.js
//Display each paragraph's text in an alert box whenever it is clicked:
$( "body" ).on( "click", "p", function() {
alert( $( this ).text() );
});
Raw
jquery.on3.js
//Cancel a link's default action using the preventDefault method.
$( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment