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 ca开发者_运维百科ll
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>
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.
精彩评论