На нашем ресурсе вы можете поделиться своими или бесплатно скачать книги для разработчиков на PHP, Mysql, Ajax, Ruby on Rails, C++, Unix, WinApi, C# sharp, .NET, Java, UML, различным Frameworks. 

subject already resident when the page is loaded (see figure 9.7), as well as all
future test subject elements that will be created after clicking the Add New Test
Subject button. Not only is the click event handler (whose activity we'll discuss in a
minute) immediately established on the existing test subject element, but the click
handler will automatically be added to any future test subjects dynamically added to
the page (which will all be created as

<div>

elements with class

testSubject

).

The click handler causes the class

matched

to be toggled for the

target

of the

event

. To make it easy to see which test subjects have this class and which do not,

we set up

CSS

rules so that elements without the class have a black border and

white background, and elements with the class are rendered with a thicker
maroon border and khaki background. We're all about trendy Web 2.0 colors!

The second of these statements establishes match and mismatch handlers for

all

<div>

elements with the class

matched

c

. Each of these handlers issues a mes-

sage to the Console, announcing that an element has become matched or mis-
matched respectively. Because no elements on the page possess the

matched

class

at page load, the Console is empty when the page is initially displayed.

Now, let's see what the Control Panel buttons do:

Add New Test Subject--This button adds a new test subject

<div>

element

to the page. The element is created with an

id

of

testSubject#

, where

#

is

a running count, and a class of

testSubject

. One such element is pre-

populated in Test Subjects via

HTML

markup.

Expire Match Handlers--This button executes the statement

$('div

.matched').expire();

, which causes the match and mismatch handlers we

established in the ready handler to expire.

Expire Event Handler--This button executes the statement

$('div.testSub-

ject').expire();

, which causes the proactive event handler we established

in the ready handler to expire.

Now that we understand how the lab is wired, let's run through some exercises:

Exercise 1--Load the page, and click within the bounds of Test Subject 1.
Because the Live Query event handler for the click event that we estab-
lished causes the

matched

class to be toggled (in this case added) to the ele-

ment, we see that the element changes colors as displayed in figure 9.8.
Additionally, because the addition of the

matched

class causes the element

to match the selector we used to establish the match and mismatch
handlers, we see that the match handler has fired and written a message to
the Console.