Skip to content

J
jquery
Commit 5dc6b7ce authored by Alexander Farkas's avatar Alexander Farkas Committed by jeresig
Browse files
Options

Used the patch from Alexander as the basis for a rewrite of the IE change... 

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.
parent d7a00234
Show whitespace changes
Inline Side-by-side
Showing with 224 additions and 167 deletions
src/event.js
View file @ 5dc6b7ce
...@@ -612,50 +612,85 @@ jQuery.event.special.submit = { ...@@ -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 ) {
jQuery.event.special.change = { var formElems = /textarea|input|select/i;
filters: {
click: function( e ) { function getVal( elem ) {
var elem = e.target; var type = elem.type, val = elem.value;
if ( elem.nodeName.toLowerCase() === "input" && elem.type === "checkbox" ) { if ( type === "radio" || type === "checkbox" ) {
return trigger( "change", this, arguments ); 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 changeFilters.keyup.call( this, e ); return val;
}, }
keyup: function( e ) {
var elem = e.target, data, index = elem.selectedIndex + ""; function testChange( e ) {
var elem = e.target, data, val;
if ( !formElems.test( elem.nodeName ) || elem.readOnly ) {
return;
}
if ( elem.nodeName.toLowerCase() === "select" ) {
data = jQuery.data( elem, "_change_data" ); data = jQuery.data( elem, "_change_data" );
jQuery.data( elem, "_change_data", index ); val = getVal(elem);
if ( (elem.type === "select-multiple" || data != null) && data !== index ) { if ( val === data ) {
return trigger( "change", this, arguments ); return;
} }
// the current data will be also retrieved by beforeactivate
if ( e.type !== "focusout" || elem.type !== "radio" ) {
jQuery.data( elem, "_change_data", val );
} }
},
beforeactivate: function( e ) {
var elem = e.target;
if ( elem.nodeName.toLowerCase() === "input" && elem.type === "radio" && !elem.checked ) { if ( elem.type !== "select" && (data != null || val) ) {
return trigger( "change", this, arguments ); e.type = "change";
return jQuery.event.trigger( e, arguments[1], this );
}
}
jQuery.event.special.change = {
filters: {
focusout: testChange,
click: function( e ) {
var elem = e.target, type = elem.type;
if ( type === "radio" || type === "checkbox" || elem.nodeName.toLowerCase() === "select" ) {
return testChange.call( this, e );
} }
}, },
blur: function( e ) {
var elem = e.target, nodeName = elem.nodeName.toLowerCase();
if ( (nodeName === "textarea" || (nodeName === "input" && (elem.type === "text" || elem.type === "password"))) // Change has to be called before submit
&& jQuery.data(elem, "_change_data") !== elem.value ) { // Keydown will be called before keypress, wich is used in submit-event delegation
keydown: function( e ) {
var elem = e.target, type = elem.type;
return trigger( "change", this, arguments ); if ( (e.keyCode === 13 && elem.nodeName.toLowerCase() !== "textarea") ||
(e.keyCode === 32 && (type === "checkbox" || type === "radio")) ||
type === "select-multiple" ) {
return testChange.call( this, e );
} }
}, },
focus: function( e ) {
var elem = e.target, nodeName = elem.nodeName.toLowerCase();
if ( nodeName === "textarea" || (nodeName === "input" && (elem.type === "text" || elem.type === "password" ) ) ) { // Beforeactivate happens also before the previous element is blurred
jQuery.data( elem, "_change_data", elem.value ); // with this event you can't trigger a change event, but you can store
// information/focus[in] is not needed anymore
beforeactivate: function( e ) {
var elem = e.target;
if ( elem.nodeName.toLowerCase() === "input" && elem.type === "radio" ) {
return jQuery.data( elem, "_change_data", getVal(elem) );
} }
} }
}, },
...@@ -664,13 +699,14 @@ jQuery.event.special.change = { ...@@ -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 );
} }
}; };
......
test/delegatetest.html
View file @ 5dc6b7ce
...@@ -31,26 +31,33 @@ ...@@ -31,26 +31,33 @@
</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>
<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
<label for="checkbox3">Checkbox 3</label>
</td>
</td>
</td> </td>
<td> <td>
<input type="radio" class="radio_test" name="myradio" id="radio1"/> <input type="radio" class="radio_test" name="myradio" id="radio1"/>
<label for="radio1">Radio 1 label</label><br/> <label for="radio1">Radio1</label><br/>
<input type="radio" class="radio_test" name="myradio" id="radio2"/> <input type="radio" class="radio_test" name="myradio" id="radio2"/>
<label for="radio2">Radio 2 label</label> <label for="radio2">Radio2</label>
<input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
<label for="radio3">Radio3</label>
</td> </td>
<td> <td>
<input class='test' value='' id='input' size='10' /> <input class='test' value='' id='input' size='10' />
<input class='test' value='test' id='input2' size='10' readonly="readonly" />
</td> </td>
<td> <td>
<textarea rows='2'></textarea> <textarea rows='2'></textarea>
</td> </td>
<td>$().bind('change')</td> <td>$(document).bind('change')</td>
</tr> </tr>
<tr> <tr>
<td>Results:</td> <td>Live:</td>
<td id='select' class="red">SELECT</td> <td id='select' class="red">SELECT</td>
<td id='mselect' class="red">MULTI</td> <td id='mselect' class="red">MULTI</td>
<td id='checkbox' class="red">CHECKBOX</td> <td id='checkbox' class="red">CHECKBOX</td>
...@@ -59,6 +66,15 @@ ...@@ -59,6 +66,15 @@
<td id='textarea' class="red">TEXTAREA</td> <td id='textarea' class="red">TEXTAREA</td>
<td id='boundChange' class="red">DOCUMENT</td> <td id='boundChange' class="red">DOCUMENT</td>
</tr> </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>
...@@ -81,7 +97,7 @@ ...@@ -81,7 +97,7 @@
<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>
...@@ -92,31 +108,54 @@ ...@@ -92,31 +108,54 @@
</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();
}).live("change", function(e){
if ( prevent ) {
e.preventDefault(); e.preventDefault();
$(id).css("backgroundColor","green").css("border","solid 3px green");
setTimeout(function(){
$(id).css("backgroundColor","");
}, 700)
} }
jQuery(id).blink();
});
};
jQuery.fn.addSubmitTest = function( id, prevent ) {
return this.live("submit", function(e){
if ( prevent ) {
e.preventDefault();
} }
$(".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")) jQuery.fn.blink = function(){
$('#input').live('change', makeChangeFunc("#text")) return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
$(document).bind('change', makeChangeFunc("#boundChange")) 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").live("submit", makeChangeFunc("#textSubmit", true) ) $("#text_submit").addSubmitTest("#textSubmit", true);
$("#password_submit").live("submit", makeChangeFunc("#passwordSubmit", true) ) $("#password_submit").addSubmitTest("#passwordSubmit", true);
$("#submit_submit").live("submit", makeChangeFunc("#submitSubmit", true) ) $("#submit_submit").addSubmitTest("#submitSubmit", true);
$(document).bind('submit', makeChangeFunc("#boundSubmit")) $(document).bind("submit", function(){
jQuery("#boundSubmit").blink();
});
</script> </script>
</body> </body>
......
test/unit/event.js
View file @ 5dc6b7ce
...@@ -873,26 +873,20 @@ test("live with change", function(){ ...@@ -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(){ ...@@ -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(){ ...@@ -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(){ ...@@ -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(){ ...@@ -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." );
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment