Question

I have a user sign up page with username and password choice fields, I’m providing validation and availability asynchronously using event listeners,

    //username
$("#username" ).bind('blur',function(e){
//ajax call 
if (e.target == e.currentTarget) {
       e.stopPropagation();               
       e.preventDefault();
}
    return false;      
       });


//userpassword
$("#userpassword" ).bind('blur',function(e){
//ajax call 
 if (e.target == e.currentTarget) {
       e.stopPropagation();               
       e.preventDefault();
       }
       return false;
 });

However on blur (ring) the child password field the ajax call on the username field is also activated, I suspect that this is a bubbling issue but somehow stopPropagate() is not working.

//adding the mark up

            <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
 <ul>
            <li>
              <input name="user[name]" type="text" id="username" accesskey="u" value="" maxlength="15" autocomplete="off" class="username" /></li>
<li><input name="user[password]" type="text" id="userpassword" accesskey="p" value=""  autocomplete="off" class="userpassword" /></li>
</ul>
</form>

Answer 1

Description of stopPropagation from jQuery API…

Prevents the event from bubbling up
the DOM tree, preventing any parent
handlers from being notified of the
event.

A textbox cannot be the parent of another textbox, so this is not going to work.