jQuery in Action
292
CHAPTER 9
Prominent, powerful, and practical plugins
9.3 The Live Query Plugin
If you've grokked some of the higher-level concepts presented in this book,
you'll have noted that jQuery has a profound effect on the structure of the pages
that we write, using it to best advantage. Employing the precepts of Unobtrusive
JavaScript, our pages usually consist of the
you'll have noted that jQuery has a profound effect on the structure of the pages
that we write, using it to best advantage. Employing the precepts of Unobtrusive
JavaScript, our pages usually consist of the
HTML
markup in the body and a
ready handler that sets up the behavior of the page, including establishing the
event handlers for the elements defined within the body.
event handlers for the elements defined within the body.
Not only does jQuery make it incredibly easy to set up our pages in this way, it
also makes it easy for us to change the page radically during its loaded lifetime.
During the life cycle of the page, many
During the life cycle of the page, many
DOM
elements that didn't exist when the
ready handler was executed can later be added to the
DOM
tree. When adding such
elements, we frequently must establish event handlers as we create the elements to
define their behavior, as we did for the initially loaded elements. The novice web
author might churn out lots of repeated, cut-and-pasted code, but more experi-
enced developers factor out common elements into functions or JavaScript classes.
define their behavior, as we did for the initially loaded elements. The novice web
author might churn out lots of repeated, cut-and-pasted code, but more experi-
enced developers factor out common elements into functions or JavaScript classes.
But wouldn't it be nice if we could declare the behavior of all elements that will
ever exist on the page in the ready handler regardless of whether they exist at
page load or not?
page load or not?
Seems like a pipe dream, doesn't it? But it's not; the Live Query Plugin allows
us to do just that!
Live Query lets us establish the following behaviors for
DOM
elements based
on their match to a jQuery selector that we define:
Establish events handlers for elements that match the selector
Trigger a function to be executed when any element matches the selector
Trigger a function to be executed when any element no longer matches
the selector
the selector
The Live Query Plugin also allows us to unbind any of these behaviors at any time.
We'll start our overview of Live Query by looking at how it allows us to estab-
lish event handlers for
DOM
elements whether they exist or not.
9.3.1 Establishing proactive event handlers
The Live Query Plugin allows us to establish event handlers in a proactive fash-
ion--establishing event handlers on elements that match a jQuery selector now
or at anytime in the future. The established handlers apply, not only to existing
elements that match the selector when the handler is established, but also to
any elements that might match the selector pattern later on in the life cycle of the
ion--establishing event handlers on elements that match a jQuery selector now
or at anytime in the future. The established handlers apply, not only to existing
elements that match the selector when the handler is established, but also to
any elements that might match the selector pattern later on in the life cycle of the