Oct 27 2006

JQuery and function chaining

Posted by admin under Ajax

I am learning new things about jQuery: function chaning is a really cool feature:



     <span id="testclick">test2</span>

<script type="text/javascript">
$(document).ready(function() {
    $('#testclick').click(function() {   
         alert('Hello world clicker!');   
     });   
    $('#testclick').click(function() {   
        $('#div1').html( 'clicked' );
     });   
     
});
</script>
..
..

Here we seem to be assigning the click function for the span to two different functions. You might think that now it depends on the library which one of them gets called.

It could be that the first one "wins" - i.e maybe the library is implemented such as

if ( click != null ) click = thefunction;

Or it could be so that the second function is the one being used - i.e library code like:

click = thefunction;

Answer? None of these assumptions are correct. Instead it keeps an array of functions - meaning BOTH FUNCTIONS gets called.

When clicking the span first the alert will occur then the text will change to "clicked". Pretty much like event handlers work in .NET framework, you can assign multiple handlers for a single event.

This is so smart IMHO - and it opens up for really interesting implementation possibiblites and asp.net integration - I will continue work on this and publish my code as soon as it's done.