aboutsummaryrefslogtreecommitdiffstats
path: root/test
diff options
context:
space:
mode:
authorAlexander Farkas <a.farkas.pm@googlemail.com>2009-12-21 15:32:32 -0500
committerjeresig <jeresig@gmail.com>2009-12-21 15:32:32 -0500
commit5dc6b7ce3469eaadb37a151d449e8d36571d1894 (patch)
tree0d19a55b9b39f2de00e66696c802ace03dd14925 /test
parentd7a00234abb07658b47b098a318af334ff3b2509 (diff)
downloadjquery-5dc6b7ce3469eaadb37a151d449e8d36571d1894.tar.gz
jquery-5dc6b7ce3469eaadb37a151d449e8d36571d1894.zip
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.
Diffstat (limited to 'test')
-rw-r--r--test/delegatetest.html249
-rw-r--r--test/unit/event.js36
2 files changed, 153 insertions, 132 deletions
diff --git a/test/delegatetest.html b/test/delegatetest.html
index cf30d87e3..e3ebbfc6e 100644
--- a/test/delegatetest.html
+++ b/test/delegatetest.html
@@ -2,122 +2,161 @@
<head>
<script src='../dist/jquery.js' type='text/javascript'></script>
<style>
- .red {
- background-color: red;
- border: solid 3px red;
- }
+ .red {
+ background-color: red;
+ border: solid 3px red;
+ }
</style>
</head>
<body>
<h2>Change Tests</h2>
<table>
- <tr>
- <td>
- Change each:
- </td>
- <td>
- <select class='select_test'>
- <option value='one'>change me 1</option>
- <option value='two'>change me 2</option>
- <option value='three'>change me 3</option>
- </select>
- </td>
- <td>
- <select class='mselect_test' multiple="multiple">
- <option value='one'>change me 1</option>
- <option value='two'>change me 2</option>
- <option value='three'>change me 3</option>
- </select>
- </td>
- <td>
- <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
- <label for="checkbox1">Checkbox 1 label</label><br/>
- <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
- <label for="checkbox2">Checkbox 2 label</label>
- </td>
- <td>
- <input type="radio" class="radio_test" name="myradio" id="radio1"/>
- <label for="radio1">Radio 1 label</label><br/>
- <input type="radio" class="radio_test" name="myradio" id="radio2"/>
- <label for="radio2">Radio 2 label</label>
- </td>
- <td>
- <input class='test' value='' id='input' size='10' />
- </td>
- <td>
- <textarea rows='2'></textarea>
- </td>
- <td>$().bind('change')</td>
- </tr>
- <tr>
- <td>Results:</td>
- <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>
+ Change each:
+ </td>
+ <td>
+ <select class='select_test'>
+ <option value='one'>change me 1</option>
+ <option value='two'>change me 2</option>
+ <option value='three'>change me 3</option>
+ </select>
+ </td>
+ <td>
+ <select class='mselect_test' multiple="multiple">
+ <option value='one'>change me 1</option>
+ <option value='two'>change me 2</option>
+ <option value='three'>change me 3</option>
+ </select>
+ </td>
+ <td>
+ <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
+ <label for="checkbox1">Checkbox 1</label><br/>
+ <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
+ <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>
+ <input type="radio" class="radio_test" name="myradio" id="radio1"/>
+ <label for="radio1">Radio1</label><br/>
+ <input type="radio" class="radio_test" name="myradio" id="radio2"/>
+ <label for="radio2">Radio2</label>
+ <input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
+ <label for="radio3">Radio3</label>
+ </td>
+ <td>
+ <input class='test' value='' id='input' size='10' />
+ <input class='test' value='test' id='input2' size='10' readonly="readonly" />
+ </td>
+ <td>
+ <textarea rows='2'></textarea>
+ </td>
+ <td>$(document).bind('change')</td>
+ </tr>
+ <tr>
+ <td>Live:</td>
+ <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>
<h2>Submit Tests</h2>
<table>
- <tr>
- <td>
- Submit each:
- </td>
- <td>
- <form action="" id="text_submit">
- <input class='test' type='text' value='Key Return To Submit'/>
- </form>
- </td>
- <td>
- <form action="" id="password_submit">
- <input class='test' type='password' value=''/>
- </form>
- </td>
- <td>
- <form action="" id="submit_submit">
- <input type='submit' value="Click Me To Submit" />
- </form>
- </td>
- <td>$().bind('submit')</td>
- </tr>
- <tr>
- <td>Results:</td>
- <td id='textSubmit' class="red">TEXT</td>
- <td id='passwordSubmit' class="red">PASSWORD</td>
- <td id='submitSubmit' class="red">BUTTON</td>
- <td id='boundSubmit' class="red">DOCUMENT</td>
- </tr>
+ <tr>
+ <td>
+ Submit each:
+ </td>
+ <td>
+ <form action="" id="text_submit">
+ <input class='test' type='text' value='Key Return To Submit'/>
+ </form>
+ </td>
+ <td>
+ <form action="" id="password_submit">
+ <input class='test' type='password' value=''/>
+ </form>
+ </td>
+ <td>
+ <form action="" id="submit_submit">
+ <input type='submit' value="Click Me To Submit" />
+ </form>
+ </td>
+ <td>$(document).bind('submit')</td>
+ </tr>
+ <tr>
+ <td>Results:</td>
+ <td id='textSubmit' class="red">TEXT</td>
+ <td id='passwordSubmit' class="red">PASSWORD</td>
+ <td id='submitSubmit' class="red">BUTTON</td>
+ <td id='boundSubmit' class="red">DOCUMENT</td>
+ </tr>
</table>
-
+
+ <ul id="log"></ul>
<script type='text/javascript'>
- makeChangeFunc = function(id, prevent){
- return function(e){
- if(prevent)
- e.preventDefault();
- $(id).css("backgroundColor","green").css("border","solid 3px green");
- setTimeout(function(){
- $(id).css("backgroundColor","");
- }, 700)
- }
- }
-
- $(".select_test").live("change",makeChangeFunc("#select"))
- $(".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) )
- $("#password_submit").live("submit", makeChangeFunc("#passwordSubmit", true) )
- $("#submit_submit").live("submit", makeChangeFunc("#submitSubmit", true) )
- $(document).bind('submit', makeChangeFunc("#boundSubmit"))
-
+ jQuery.fn.addChangeTest = function( id, prevent ) {
+ return this.bind("change", function(e){
+ jQuery(id + "bind").blink();
+ }).live("change", function(e){
+ if ( prevent ) {
+ e.preventDefault();
+ }
+
+ jQuery(id).blink();
+ });
+ };
+
+ jQuery.fn.addSubmitTest = function( id, prevent ) {
+ return this.live("submit", function(e){
+ if ( prevent ) {
+ 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>
</body>
</html>
diff --git a/test/unit/event.js b/test/unit/event.js
index 80a2e6a0b..70c721f82 100644
--- a/test/unit/event.js
+++ b/test/unit/event.js
@@ -873,26 +873,20 @@ test("live with change", function(){
// test click on select
- // first click sets data
- if ( !jQuery.support.changeBubbles ) {
- select[0].selectedIndex = 1;
- select.trigger("keyup");
- }
-
// second click that changed it
selectChange = 0;
select[0].selectedIndex = select[0].selectedIndex ? 0 : 1;
- select.trigger(jQuery.support.changeBubbles ? "change" : "click");
+ select.trigger("change");
equals( selectChange, 1, "Change on click." );
// test keys on select
selectChange = 0;
select[0].selectedIndex = select[0].selectedIndex ? 0 : 1;
- select.trigger(jQuery.support.changeBubbles ? "change" : "keyup");
+ select.trigger("change");
equals( selectChange, 1, "Change on keyup." );
// test click on checkbox
- checkbox.trigger(jQuery.support.changeBubbles ? "change" : "click");
+ checkbox.trigger("change");
equals( checkboxChange, 1, "Change on checkbox." );
// test before activate on radio
@@ -903,12 +897,8 @@ test("live with change", function(){
textareaChange++;
});
- if ( !jQuery.support.changeBubbles ) {
- textarea.trigger("focus");
- }
-
textarea.val(oldVal + "foo");
- textarea.trigger(jQuery.support.changeBubbles ? "change" : "blur");
+ textarea.trigger("change");
equals( textareaChange, 1, "Change on textarea." );
textarea.val(oldVal);
@@ -920,12 +910,8 @@ test("live with change", function(){
textChange++;
});
- if ( !jQuery.support.changeBubbles ) {
- text.trigger("focus");
- }
-
text.val(oldVal+"foo");
- text.trigger(jQuery.support.changeBubbles ? "change" : "blur");
+ text.trigger("change");
equals( textChange, 1, "Change on text input." );
text.val(oldTextVal);
@@ -937,12 +923,8 @@ test("live with change", function(){
passwordChange++;
});
- if ( !jQuery.support.changeBubbles ) {
- password.trigger("focus");
- }
-
password.val(oldPasswordVal + "foo");
- password.trigger(jQuery.support.changeBubbles ? "change" : "blur");
+ password.trigger("change");
equals( passwordChange, 1, "Change on password input." );
password.val(oldPasswordVal);
@@ -954,17 +936,17 @@ test("live with change", function(){
selectChange = 0;
select.die("change");
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." );
selectChange = 0;
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." );
// die specific checkbox
checkbox.die("change", checkboxFunction);
- checkbox.trigger(jQuery.support.changeBubbles ? "change" : "click");
+ checkbox.trigger("change");
equals( checkboxChange, 1, "Die on checkbox." );
});
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-07 04:03:47 +0000