Yep Karl's explanation was great. Also, you can leverage bind() to work
with your own custom events in the case where you want to define
something that needs to be triggered based on another action. Using the
code from the docs, you can see what I'm talking about:
$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
Rey...
Charlie Griefer wrote:
Hi Karl:
Awesome! Got it :)
Thanks for the explanation and examples.
Charlie
On Fri, Dec 4, 2009 at 9:01 AM, Karl Swedberg <k...@englishrules.com
<mailto:k...@englishrules.com>> wrote:
Hey Charlie,
methods such as .click() and .mouseover() are just convenience
methods. They all use .bind() internally. One nice thing about
.bind() is that you can use multiple event types with it. For
example, instead of doing this:
$('a')
.mouseover(function() {
var $link = $(this);
// do something with $link
})
.mouseout(function() {
var $link = $(this);
// do something with $link
});
You can combine them and avoid some repetition:
$('a')
.bind('mouseover mouseout', function(event) {
var $link = $(this);
if (event.type == 'mouseover') {
// do something with $link on mouseover
} else {
// do something with $link on mouseout
}
});
--Karl
____________
Karl Swedberg
www.englishrules.com <http://www.englishrules.com>
www.learningjquery.com <http://www.learningjquery.com>
On Dec 4, 2009, at 11:46 AM, Charlie Griefer wrote:
Hi All:
I've read over the docs, but don't quite understand what the
bind() event provides versus just assigning a particular event
handler to a selected element (or set of elements).
For example, consider the code below. What's the difference
between the interaction with the <p> elements of class "first",
and the <p> elements of class "second"? Isn't the second bit
effectively binding a click event handler to a specific batch of
"p" elements just as the first one is?
Just not grokking it. Would appreciate if anybody could enlighten me.
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js";></script>
<script type="text/javascript">
$(document).ready(function() {
$('p.first').bind('click', function() {
alert($(this).text());
});
$('p.second').click(function() {
alert($(this).text());
});
});
</script>
<p class="first">A</p>
<p class="first">B</p>
<p class="first">C</p>
<p class="first">D</p>
<p class="first">E</p>
<hr />
<p class="second">F</p>
<p class="second">G</p>
<p class="second">H</p>
<p class="second">I</p>
<p class="second">J</p>
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I
love my wife. And I wish you my kind of success.
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
