deac/jquery
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.

Browse source
This commit is contained in:
Alexander Farkas 2009-12-21 15:32:32 -05:00 committed by jeresig
parent d7a00234ab
commit 5dc6b7ce34
3 changed files with 227 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
src/event.js
View file

@ -612,50 +612,85 @@ jQuery.event.special.submit = {
// change delegation, happens here so we have bind. // change delegation, happens here so we have bind.
if ( !jQuery.support.changeBubbles ) { if ( !jQuery.support.changeBubbles ) {
var formElems = /textarea|input|select/i;
function getVal( elem ) {
var type = elem.type, val = elem.value;
if ( type === "radio" || type === "checkbox" ) {
val = elem.checked;
} else if ( type === "select-multiple" ) {
val = elem.selectedIndex > -1 ?
jQuery.map( elem.options, function( elem ) {
return elem.selected;
}).join("-") :
"";
} else if ( elem.nodeName.toLowerCase() === "select" ) {
val = elem.selectedIndex;
}
return val;
}
function testChange( e ) {
var elem = e.target, data, val;
if ( !formElems.test( elem.nodeName ) || elem.readOnly ) {
return;
}
data = jQuery.data( elem, "_change_data" );
val = getVal(elem);
if ( val === data ) {
return;
}
// the current data will be also retrieved by beforeactivate
if ( e.type !== "focusout" || elem.type !== "radio" ) {
jQuery.data( elem, "_change_data", val );
}
if ( elem.type !== "select" && (data != null || val) ) {
e.type = "change";
return jQuery.event.trigger( e, arguments[1], this );
}
}
jQuery.event.special.change = { jQuery.event.special.change = {
filters: { filters: {
focusout: testChange,
click: function( e ) { click: function( e ) {
var elem = e.target; var elem = e.target, type = elem.type;
if ( elem.nodeName.toLowerCase() === "input" && elem.type === "checkbox" ) { if ( type === "radio" || type === "checkbox" || elem.nodeName.toLowerCase() === "select" ) {
return trigger( "change", this, arguments ); return testChange.call( this, e );
}
return changeFilters.keyup.call( this, e );
},
keyup: function( e ) {
var elem = e.target, data, index = elem.selectedIndex + "";
if ( elem.nodeName.toLowerCase() === "select" ) {
data = jQuery.data( elem, "_change_data" );
jQuery.data( elem, "_change_data", index );
if ( (elem.type === "select-multiple" || data != null) && data !== index ) {
return trigger( "change", this, arguments );
}
} }
}, },
// Change has to be called before submit
// Keydown will be called before keypress, wich is used in submit-event delegation
keydown: function( e ) {
var elem = e.target, type = elem.type;
if ( (e.keyCode === 13 && elem.nodeName.toLowerCase() !== "textarea") ||
(e.keyCode === 32 && (type === "checkbox" || type === "radio")) ||
type === "select-multiple" ) {
return testChange.call( this, e );
}
},
// Beforeactivate happens also before the previous element is blurred
// with this event you can't trigger a change event, but you can store
// information/focus[in] is not needed anymore
beforeactivate: function( e ) { beforeactivate: function( e ) {
var elem = e.target; var elem = e.target;
if ( elem.nodeName.toLowerCase() === "input" && elem.type === "radio" && !elem.checked ) { if ( elem.nodeName.toLowerCase() === "input" && elem.type === "radio" ) {
return trigger( "change", this, arguments ); return jQuery.data( elem, "_change_data", getVal(elem) );
}
},
blur: function( e ) {
var elem = e.target, nodeName = elem.nodeName.toLowerCase();
if ( (nodeName === "textarea" || (nodeName === "input" && (elem.type === "text" || elem.type === "password")))
&& jQuery.data(elem, "_change_data") !== elem.value ) {
return trigger( "change", this, arguments );
}
},
focus: function( e ) {
var elem = e.target, nodeName = elem.nodeName.toLowerCase();
if ( nodeName === "textarea" || (nodeName === "input" && (elem.type === "text" || elem.type === "password" ) ) ) {
jQuery.data( elem, "_change_data", elem.value );
} }
} }
}, },
@ -664,13 +699,14 @@ jQuery.event.special.change = {
jQuery.event.add( this, type + ".specialChange." + fn.guid, changeFilters[type] ); jQuery.event.add( this, type + ".specialChange." + fn.guid, changeFilters[type] );
} }
// always want to listen for change for trigger return formElems.test( this.nodeName );
return false;
}, },
remove: function( namespaces, fn ) { remove: function( namespaces, fn ) {
for ( var type in changeFilters ) { for ( var type in changeFilters ) {
jQuery.event.remove( this, type + ".specialChange" + (fn ? "."+fn.guid : ""), changeFilters[type] ); jQuery.event.remove( this, type + ".specialChange" + (fn ? "."+fn.guid : ""), changeFilters[type] );
} }
return formElems.test( this.nodeName );
} }
}; };

241
test/delegatetest.html
View file

@ -2,121 +2,160 @@
<head> <head>
<script src='../dist/jquery.js' type='text/javascript'></script> <script src='../dist/jquery.js' type='text/javascript'></script>
<style> <style>
.red { .red {
background-color: red; background-color: red;
border: solid 3px red; border: solid 3px red;
} }
</style> </style>
</head> </head>
<body> <body>
<h2>Change Tests</h2> <h2>Change Tests</h2>
<table> <table>
<tr> <tr>
<td> <td>
Change each: Change each:
</td> </td>
<td> <td>
<select class='select_test'> <select class='select_test'>
<option value='one'>change me 1</option> <option value='one'>change me 1</option>
<option value='two'>change me 2</option> <option value='two'>change me 2</option>
<option value='three'>change me 3</option> <option value='three'>change me 3</option>
</select> </select>
</td> </td>
<td> <td>
<select class='mselect_test' multiple="multiple"> <select class='mselect_test' multiple="multiple">
<option value='one'>change me 1</option> <option value='one'>change me 1</option>
<option value='two'>change me 2</option> <option value='two'>change me 2</option>
<option value='three'>change me 3</option> <option value='three'>change me 3</option>
</select> </select>
</td> </td>
<td> <td>
<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/> <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
<label for="checkbox1">Checkbox 1 label</label><br/> <label for="checkbox1">Checkbox 1</label><br/>
<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/> <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
<label for="checkbox2">Checkbox 2 label</label> <label for="checkbox2">Checkbox 2</label>
</td> <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
<td> <label for="checkbox3">Checkbox 3</label>
<input type="radio" class="radio_test" name="myradio" id="radio1"/> </td>
<label for="radio1">Radio 1 label</label><br/> </td>
<input type="radio" class="radio_test" name="myradio" id="radio2"/> </td>
<label for="radio2">Radio 2 label</label> <td>
</td> <input type="radio" class="radio_test" name="myradio" id="radio1"/>
<td> <label for="radio1">Radio1</label><br/>
<input class='test' value='' id='input' size='10' /> <input type="radio" class="radio_test" name="myradio" id="radio2"/>
</td> <label for="radio2">Radio2</label>
<td> <input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
<textarea rows='2'></textarea> <label for="radio3">Radio3</label>
</td> </td>
<td>$().bind('change')</td> <td>
</tr> <input class='test' value='' id='input' size='10' />
<tr> <input class='test' value='test' id='input2' size='10' readonly="readonly" />
<td>Results:</td> </td>
<td id='select' class="red">SELECT</td> <td>
<td id='mselect' class="red">MULTI</td> <textarea rows='2'></textarea>
<td id='checkbox' class="red">CHECKBOX</td> </td>
<td id='radio' class="red">RADIO</td> <td>$(document).bind('change')</td>
<td id='text' class="red">TEXT</td> </tr>
<td id='textarea' class="red">TEXTAREA</td> <tr>
<td id='boundChange' class="red">DOCUMENT</td> <td>Live:</td>
</tr> <td id='select' class="red">SELECT</td>
<td id='mselect' class="red">MULTI</td>
<td id='checkbox' class="red">CHECKBOX</td>
<td id='radio' class="red">RADIO</td>
<td id='text' class="red">TEXT</td>
<td id='textarea' class="red">TEXTAREA</td>
<td id='boundChange' class="red">DOCUMENT</td>
</tr>
<tr>
<td>Bind:</td>
<td id='selectbind' class="red">SELECT</td>
<td id='mselectbind' class="red">MULTI</td>
<td id='checkboxbind' class="red">CHECKBOX</td>
<td id='radiobind' class="red">RADIO</td>
<td id='textbind' class="red">TEXT</td>
<td id='textareabind' class="red">TEXTAREA</td>
</tr>
</table> </table>
<h2>Submit Tests</h2> <h2>Submit Tests</h2>
<table> <table>
<tr> <tr>
<td> <td>
Submit each: Submit each:
</td> </td>
<td> <td>
<form action="" id="text_submit"> <form action="" id="text_submit">
<input class='test' type='text' value='Key Return To Submit'/> <input class='test' type='text' value='Key Return To Submit'/>
</form> </form>
</td> </td>
<td> <td>
<form action="" id="password_submit"> <form action="" id="password_submit">
<input class='test' type='password' value=''/> <input class='test' type='password' value=''/>
</form> </form>
</td> </td>
<td> <td>
<form action="" id="submit_submit"> <form action="" id="submit_submit">
<input type='submit' value="Click Me To Submit" /> <input type='submit' value="Click Me To Submit" />
</form> </form>
</td> </td>
<td>$().bind('submit')</td> <td>$(document).bind('submit')</td>
</tr> </tr>
<tr> <tr>
<td>Results:</td> <td>Results:</td>
<td id='textSubmit' class="red">TEXT</td> <td id='textSubmit' class="red">TEXT</td>
<td id='passwordSubmit' class="red">PASSWORD</td> <td id='passwordSubmit' class="red">PASSWORD</td>
<td id='submitSubmit' class="red">BUTTON</td> <td id='submitSubmit' class="red">BUTTON</td>
<td id='boundSubmit' class="red">DOCUMENT</td> <td id='boundSubmit' class="red">DOCUMENT</td>
</tr> </tr>
</table> </table>
<ul id="log"></ul>
<script type='text/javascript'> <script type='text/javascript'>
makeChangeFunc = function(id, prevent){ jQuery.fn.addChangeTest = function( id, prevent ) {
return function(e){ return this.bind("change", function(e){
if(prevent) jQuery(id + "bind").blink();
e.preventDefault(); }).live("change", function(e){
$(id).css("backgroundColor","green").css("border","solid 3px green"); if ( prevent ) {
setTimeout(function(){ e.preventDefault();
$(id).css("backgroundColor",""); }
}, 700)
}
}
$(".select_test").live("change",makeChangeFunc("#select")) jQuery(id).blink();
$(".mselect_test").live("change",makeChangeFunc("#mselect")) });
$(".checkbox_test").live("change",makeChangeFunc("#checkbox")) };
$(".radio_test").live("change",makeChangeFunc("#radio"))
$('textarea').live('change', makeChangeFunc("#textarea"))
$('#input').live('change', makeChangeFunc("#text"))
$(document).bind('change', makeChangeFunc("#boundChange"))
$("#text_submit").live("submit", makeChangeFunc("#textSubmit", true) ) jQuery.fn.addSubmitTest = function( id, prevent ) {
$("#password_submit").live("submit", makeChangeFunc("#passwordSubmit", true) ) return this.live("submit", function(e){
$("#submit_submit").live("submit", makeChangeFunc("#submitSubmit", true) ) if ( prevent ) {
$(document).bind('submit', makeChangeFunc("#boundSubmit")) e.preventDefault();
}
jQuery(id).blink();
});
};
jQuery.fn.blink = function(){
return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
jQuery(this).css("backgroundColor","");
next();
});
};
$(".select_test").addChangeTest("#select");
$(".mselect_test").addChangeTest("#mselect");
$(".checkbox_test").addChangeTest("#checkbox");
$(".radio_test").addChangeTest("#radio");
$('textarea').addChangeTest("#textarea");
$('#input').addChangeTest("#text");
$(document).bind("change", function(){
jQuery("#boundChange").blink();
});
$("#text_submit").addSubmitTest("#textSubmit", true);
$("#password_submit").addSubmitTest("#passwordSubmit", true);
$("#submit_submit").addSubmitTest("#submitSubmit", true);
$(document).bind("submit", function(){
jQuery("#boundSubmit").blink();
});
</script> </script>
</body> </body>

36
test/unit/event.js
View file

@ -873,26 +873,20 @@ test("live with change", function(){
// test click on select // test click on select
// first click sets data
if ( !jQuery.support.changeBubbles ) {
select[0].selectedIndex = 1;
select.trigger("keyup");
}
// second click that changed it // second click that changed it
selectChange = 0; selectChange = 0;
select[0].selectedIndex = select[0].selectedIndex ? 0 : 1; select[0].selectedIndex = select[0].selectedIndex ? 0 : 1;
select.trigger(jQuery.support.changeBubbles ? "change" : "click"); select.trigger("change");
equals( selectChange, 1, "Change on click." ); equals( selectChange, 1, "Change on click." );
// test keys on select // test keys on select
selectChange = 0; selectChange = 0;
select[0].selectedIndex = select[0].selectedIndex ? 0 : 1; select[0].selectedIndex = select[0].selectedIndex ? 0 : 1;
select.trigger(jQuery.support.changeBubbles ? "change" : "keyup"); select.trigger("change");
equals( selectChange, 1, "Change on keyup." ); equals( selectChange, 1, "Change on keyup." );
// test click on checkbox // test click on checkbox
checkbox.trigger(jQuery.support.changeBubbles ? "change" : "click"); checkbox.trigger("change");
equals( checkboxChange, 1, "Change on checkbox." ); equals( checkboxChange, 1, "Change on checkbox." );
// test before activate on radio // test before activate on radio
@ -903,12 +897,8 @@ test("live with change", function(){
textareaChange++; textareaChange++;
}); });
if ( !jQuery.support.changeBubbles ) {
textarea.trigger("focus");
}
textarea.val(oldVal + "foo"); textarea.val(oldVal + "foo");
textarea.trigger(jQuery.support.changeBubbles ? "change" : "blur"); textarea.trigger("change");
equals( textareaChange, 1, "Change on textarea." ); equals( textareaChange, 1, "Change on textarea." );
textarea.val(oldVal); textarea.val(oldVal);
@ -920,12 +910,8 @@ test("live with change", function(){
textChange++; textChange++;
}); });
if ( !jQuery.support.changeBubbles ) {
text.trigger("focus");
}
text.val(oldVal+"foo"); text.val(oldVal+"foo");
text.trigger(jQuery.support.changeBubbles ? "change" : "blur"); text.trigger("change");
equals( textChange, 1, "Change on text input." ); equals( textChange, 1, "Change on text input." );
text.val(oldTextVal); text.val(oldTextVal);
@ -937,12 +923,8 @@ test("live with change", function(){
passwordChange++; passwordChange++;
}); });
if ( !jQuery.support.changeBubbles ) {
password.trigger("focus");
}
password.val(oldPasswordVal + "foo"); password.val(oldPasswordVal + "foo");
password.trigger(jQuery.support.changeBubbles ? "change" : "blur"); password.trigger("change");
equals( passwordChange, 1, "Change on password input." ); equals( passwordChange, 1, "Change on password input." );
password.val(oldPasswordVal); password.val(oldPasswordVal);
@ -954,17 +936,17 @@ test("live with change", function(){
selectChange = 0; selectChange = 0;
select.die("change"); select.die("change");
select[0].selectedIndex = select[0].selectedIndex ? 0 : 1; select[0].selectedIndex = select[0].selectedIndex ? 0 : 1;
select.trigger(jQuery.support.changeBubbles ? "change" : "click"); select.trigger("change");
equals( selectChange, 0, "Die on click works." ); equals( selectChange, 0, "Die on click works." );
selectChange = 0; selectChange = 0;
select[0].selectedIndex = select[0].selectedIndex ? 0 : 1; select[0].selectedIndex = select[0].selectedIndex ? 0 : 1;
select.trigger(jQuery.support.changeBubbles ? "change" : "keyup"); select.trigger("change");
equals( selectChange, 0, "Die on keyup works." ); equals( selectChange, 0, "Die on keyup works." );
// die specific checkbox // die specific checkbox
checkbox.die("change", checkboxFunction); checkbox.die("change", checkboxFunction);
checkbox.trigger(jQuery.support.changeBubbles ? "change" : "click"); checkbox.trigger("change");
equals( checkboxChange, 1, "Die on checkbox." ); equals( checkboxChange, 1, "Die on checkbox." );
}); });