Today I experimented with Multiple binds/triggers in Jquery. What I wanted to do what to raise an event, lets say "Add Contact" and have multiple other elements react on that. Well, it wasn't as smooth as I expected since you have to trigger an event on a specified element and only that element or a parent element can bind to it.
Example:
Take this very simple webpage. The scenario is that I wan't to trigger an event when clicking on "Add Contact" and on that event something should happen with both my contact list and my twitter widget.
...
<body>
<div id="main">
<button id="add_contact">Add Contact </button>
<div id="contact_list">Contact List: </div>
<div id="twitter_widget">Twitter Widget: </div>
</div>
</body>
...
<body>
<div id="main">
<button id="add_contact">Add Contact </button>
<div id="contact_list">Contact List: </div>
<div id="twitter_widget">Twitter Widget: </div>
</div>
</body>
...
So if I want to trigger an event on the button you have to trigger it on some element. If I trigger it on contact_list then only that element can bind to it, and if I trigger it twitter_widget then contact_list can't bind to it. So the solution is to bind it to both elements.
We'll have to image that I have a variable with the contact object
$('#add_contact').click(function() {
$('#contact_list, #twitter_widget').trigger('add_contact', contact );
})
$('#contact_list, #twitter_widget').trigger('add_contact', contact );
})
And then add binds to both your elements.
$('#contact_list').bind('add_contact', function(e, contact) {
$(this).append('* ' + contact.name + '
');
});
$('#twitter_widget').bind('add_contact', function(e, contact) {
$(this).append('> Tweeted: I added ' + contact.name + ' to my contact list, I think this is the beginning of a beautiful friendship.
');
});
$(this).append('* ' + contact.name + '
');
});
$('#twitter_widget').bind('add_contact', function(e, contact) {
$(this).append('> Tweeted: I added ' + contact.name + ' to my contact list, I think this is the beginning of a beautiful friendship.
');
});
I want to finish this post with a lengthy example where I use this technique and also the reverse. Where I have two buttons that trigger the same event on another element. Great for logging. And also an example where one button click triggers more than one event. It know it looks messy in a this post so just copy-paste it to your favorite editor, save as .html and open in a browser and you will see the magic.
Enjoy!
<html>
<head>
<title>Welcome to Jquery Multiple Bind Example!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
</head>
<body bgcolor="white" text="black">
<center><h1>Welcome to Jquery Multiple Bind Example!</h1></center>
<p id="add_contact" style="background:#faa; width:300px;">
<b>Add Contact</b><br/>
<input id="name"/><br/>
<button id="add">Add Contact</button><br/>
<script>
$('#add').click(function() {
$('#contact_list, #twitter_widget').trigger('add_contact', $('#name').val() );
$('#log').trigger('log', 'Contact Added: ' + $('#name').val() );
})
</script>
</p>
<p id="connect_div" style="background:#faa; width:300px;">
<b>Connect To Server</b><br/>
<button id="connect">Connect</button><br/>
<script>
$('#connect').click(function() {
$('#log').trigger('log', 'Connected to the server.' );
})
</script>
</p>
<p id="contact_list" style="background:#faa; width:300px;">
<b>Contact List</b><br/>
<script>
$('#contact_list').bind('add_contact', function(e, name) {
$(this).append('* ' + name + '<br>');
});
</script>
</p>
<p id="twitter_widget" style="background:#faa; width:1000px;">
<b>Twitter Widget</b><br/>
<script>
$('#twitter_widget').bind('add_contact', function(e, name) {
$(this).append('> Tweeted: I added ' + name + ' to my contact list, I think this is the beginning of a beautiful friendship.<br>');
});
</script>
</p>
<p id="log" style="background:#faa; width:1000px;">
<b>Log</b><br/>
<script>
$('#log').bind('log', function(e, name) {
$(this).append(new Date().getTime() + ':' + name + '<br>');
});
</script>
</p>
</body>
</html>
<head>
<title>Welcome to Jquery Multiple Bind Example!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
</head>
<body bgcolor="white" text="black">
<center><h1>Welcome to Jquery Multiple Bind Example!</h1></center>
<p id="add_contact" style="background:#faa; width:300px;">
<b>Add Contact</b><br/>
<input id="name"/><br/>
<button id="add">Add Contact</button><br/>
<script>
$('#add').click(function() {
$('#contact_list, #twitter_widget').trigger('add_contact', $('#name').val() );
$('#log').trigger('log', 'Contact Added: ' + $('#name').val() );
})
</script>
</p>
<p id="connect_div" style="background:#faa; width:300px;">
<b>Connect To Server</b><br/>
<button id="connect">Connect</button><br/>
<script>
$('#connect').click(function() {
$('#log').trigger('log', 'Connected to the server.' );
})
</script>
</p>
<p id="contact_list" style="background:#faa; width:300px;">
<b>Contact List</b><br/>
<script>
$('#contact_list').bind('add_contact', function(e, name) {
$(this).append('* ' + name + '<br>');
});
</script>
</p>
<p id="twitter_widget" style="background:#faa; width:1000px;">
<b>Twitter Widget</b><br/>
<script>
$('#twitter_widget').bind('add_contact', function(e, name) {
$(this).append('> Tweeted: I added ' + name + ' to my contact list, I think this is the beginning of a beautiful friendship.<br>');
});
</script>
</p>
<p id="log" style="background:#faa; width:1000px;">
<b>Log</b><br/>
<script>
$('#log').bind('log', function(e, name) {
$(this).append(new Date().getTime() + ':' + name + '<br>');
});
</script>
</p>
</body>
</html>
