JQuery: Novice to Ninja- P19:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Forms Controls and Dialogs 247 You might be curious about the use of the trigger function. It s simply a different way to cause an event to fire so in this example we could also have used the syntax we ve already seen . The trigger action is more flexible than its shorter counterpart but for now we ll just stick with the basic usage. trigger is being used in this example for clarity to show whoever is reading the code that we want to manually fire an event. In this case we re just passing on the event the input was blurred so we tell the original element that it s time to finish editing. We could manage all of this inside the input box s blur event handler but by delegating the event like this we avoid nesting our code another level which would make it harder to read . It also makes sense to let the original element deal with its own logic. The counterpart to trigger is bind. bind lets us add event handlers to an object. Sound familiar So far we ve been binding events by using shorthand convenience methods like click hover ready and so on. But if you pop the hood you ll see that internally they all rely on bind. The bind action takes a string containing the name of the event to bind and a callback function to run. You can also bind multiple events to an item in a single call by wrapping them in an object. For example our code attached three separate events to .editable and .editable-area elements click hover and blur. If you wanted to you could rewrite that with the bind syntax .editable .editable-area .bind hover function e Hover event handler click function e Click event handler blur function e Blur event handler Let s return to our example with the editing over we can go back to our default state. We ll grab the value from the form element and send it to the server with .post putting a Saving . message in place as we do so. When the POST is done we eliminate the message and replace it with the updated value. As with the Ajax 248 jQuery Novice to .
