Skip to content

Instantly share code, notes, and snippets.

@denisinla

denisinla/index.html

Created August 17, 2014 06:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denisinla/1bca974b016b9f54844a to your computer and use it in GitHub Desktop.
Save denisinla/1bca974b016b9f54844a to your computer and use it in GitHub Desktop.
Download ZIP
Decoupling jquery custom events. // source http://jsbin.com/wacut/5
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Decoupling jquery custom events.</title>
<style id="jsbin-css">
body{
font: 13px "Helvetica",Arial,sans-serif;
color: #333
}
button{
border: 1px solid #ccc;
background: #fff;
border-radius: 2px;
padding: 10px;
text-transform: uppercase;
font-weight: 700;
outline: none;
}
li{
padding-bottom: 10px;
}
</style>
</head>
<body>
<ul class="items">
</ul>
<button class="add-items">Add Items</button>
<script id="jsbin-javascript">
var doc = $(document);
$(".add-items").on("click",function(){
doc.trigger("addItem",[$(this)]);
event.preventDefault();
});
var items = $(".items");
doc.on("addItem",function(){
console.log(arguments);
items.append("<li>iTems</li>");
});
</script>
</body>
</html>
Raw
jsbin.wacut.css
body{
font: 13px "Helvetica",Arial,sans-serif;
color: #333
}
button{
border: 1px solid #ccc;
background: #fff;
border-radius: 2px;
padding: 10px;
text-transform: uppercase;
font-weight: 700;
outline: none;
}
li{
padding-bottom: 10px;
}
Raw
jsbin.wacut.js
var doc = $(document);
$(".add-items").on("click",function(){
doc.trigger("addItem",[$(this)]);
event.preventDefault();
});
var items = $(".items");
doc.on("addItem",function(){
console.log(arguments);
items.append("<li>iTems</li>");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment