Adds jQuery collection to objects that will be used as global events context if provi...
[jquery.git] / test / delegatetest.html
index 5e2cd82..6479d26 100644 (file)
-<html>\r
-    <head>\r
-        <script src='../dist/jquery.js' type='text/javascript'></script>\r
-        <style>\r
-       .red {\r
-           background-color: red;\r
-           border: solid 3px red;\r
-       }\r
-        </style>\r
-    </head>\r
-    <body>\r
-        <h2>Change Tests</h2>\r
-        <table>\r
-           <tr>\r
-               <td>\r
-               Change each:\r
-               </td>\r
-               <td>\r
-               <select class='select_test'>\r
-                   <option value='one'>change me 1</option>\r
-                   <option value='two'>change me 2</option>\r
-                   <option value='three'>change me 3</option>\r
-               </select>\r
-               </td>\r
-               <td>\r
-               <select class='mselect_test' multiple="multiple">\r
-                   <option value='one'>change me 1</option>\r
-                   <option value='two'>change me 2</option>\r
-                   <option value='three'>change me 3</option>\r
-               </select>\r
-               </td>\r
-               <td>\r
-               <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>\r
-               <label for="checkbox1">Checkbox 1</label><br/>\r
-               <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>\r
-               <label for="checkbox2">Checkbox 2</label>\r
-               <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>\r
-               <label for="checkbox3">Checkbox 3</label>\r
-               </td>\r
-               </td>\r
-               </td>\r
-               <td>\r
-               <input type="radio" class="radio_test" name="myradio" id="radio1"/>\r
-               <label for="radio1">Radio1</label><br/>\r
-               <input type="radio" class="radio_test" name="myradio" id="radio2"/>\r
-               <label for="radio2">Radio2</label>\r
-               <input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>\r
-               <label for="radio3">Radio3</label>\r
-               </td>\r
-               <td>\r
-               <input class='test' value='' id='input' size='10' />\r
-               <input class='test' value='test' id='input2' size='10' readonly="readonly" />\r
-               </td>\r
-               <td>\r
-               <textarea rows='2'></textarea>\r
-               </td>\r
-               <td>$(document).bind('change')</td>\r
-           </tr>\r
-           <tr>\r
-               <td>Live:</td>\r
-               <td id='select' class="red">SELECT</td>\r
-               <td id='mselect' class="red">MULTI</td>\r
-               <td id='checkbox' class="red">CHECKBOX</td>\r
-               <td id='radio' class="red">RADIO</td>\r
-               <td id='text' class="red">TEXT</td>\r
-               <td id='textarea' class="red">TEXTAREA</td>\r
-               <td id='boundChange' class="red">DOCUMENT</td>\r
-           </tr>\r
-           <tr>\r
-               <td>Bind:</td>\r
-               <td id='selectbind' class="red">SELECT</td>\r
-               <td id='mselectbind' class="red">MULTI</td>\r
-               <td id='checkboxbind' class="red">CHECKBOX</td>\r
-               <td id='radiobind' class="red">RADIO</td>\r
-               <td id='textbind' class="red">TEXT</td>\r
-               <td id='textareabind' class="red">TEXTAREA</td>\r
-           </tr>\r
-           <tr>\r
-               <td>Focusin:</td>\r
-               <td id='selectfocus' class="red">SELECT</td>\r
-               <td id='mselectfocus' class="red">MULTI</td>\r
-               <td id='checkboxfocus' class="red">CHECKBOX</td>\r
-               <td id='radiofocus' class="red">RADIO</td>\r
-               <td id='textfocus' class="red">TEXT</td>\r
-               <td id='textareafocus' class="red">TEXTAREA</td>\r
-               <td id='boundFocus' class="red">DOCUMENT</td>\r
-           </tr>\r
-           <tr>\r
-               <td>Focusout:</td>\r
-               <td id='selectblur' class="red">SELECT</td>\r
-               <td id='mselectblur' class="red">MULTI</td>\r
-               <td id='checkboxblur' class="red">CHECKBOX</td>\r
-               <td id='radioblur' class="red">RADIO</td>\r
-               <td id='textblur' class="red">TEXT</td>\r
-               <td id='textareablur' class="red">TEXTAREA</td>\r
-               <td id='boundBlur' class="red">DOCUMENT</td>\r
-           </tr>\r
-           <tr>\r
-               <td>Live Focus:</td>\r
-               <td id='selectlfocus' class="red">SELECT</td>\r
-               <td id='mselectlfocus' class="red">MULTI</td>\r
-               <td id='checkboxlfocus' class="red">CHECKBOX</td>\r
-               <td id='radiolfocus' class="red">RADIO</td>\r
-               <td id='textlfocus' class="red">TEXT</td>\r
-               <td id='textarealfocus' class="red">TEXTAREA</td>\r
-           </tr>\r
-           <tr>\r
-               <td>Live Blur:</td>\r
-               <td id='selectlblur' class="red">SELECT</td>\r
-               <td id='mselectlblur' class="red">MULTI</td>\r
-               <td id='checkboxlblur' class="red">CHECKBOX</td>\r
-               <td id='radiolblur' class="red">RADIO</td>\r
-               <td id='textlblur' class="red">TEXT</td>\r
-               <td id='textarealblur' class="red">TEXTAREA</td>\r
-           </tr>\r
-        </table>\r
-        <h2>Submit Tests</h2>\r
-        <table>\r
-       <tr>\r
-           <td>\r
-               Submit each:\r
-           </td>\r
-           <td>\r
-               <form action="" id="text_submit">\r
-               <input class='test' type='text' value='Key Return To Submit'/>\r
-               </form>\r
-           </td>\r
-           <td>\r
-               <form action="" id="password_submit">\r
-               <input class='test' type='password' value=''/>\r
-               </form>\r
-           </td>\r
-           <td>\r
-               <form action="" id="submit_submit">\r
-               <input type='submit' value="Click Me To Submit" />\r
-               </form>\r
-           </td>\r
-           <td>$(document).bind('submit')</td>\r
-       </tr>\r
-       <tr>\r
-               <td>Results:</td>\r
-               <td id='textSubmit' class="red">TEXT</td>\r
-               <td id='passwordSubmit' class="red">PASSWORD</td>\r
-               <td id='submitSubmit' class="red">BUTTON</td>\r
-               <td id='boundSubmit' class="red">DOCUMENT</td>\r
-       </tr>\r
-        </table>\r
-\r
-       <ul id="log"></ul>\r
-\r
-        <script type='text/javascript'>\r
-       jQuery.fn.addChangeTest = function( id, prevent ) {\r
-               this.bind("focusin", function(){\r
-                       jQuery(id + "focus").blink();\r
-               }).bind("focusout", function(){\r
-                       jQuery(id + "blur").blink();\r
-               });\r
-\r
-               this.bind("focus", function(){\r
-                       jQuery(id + "lfocus").blink();\r
-               }).bind("blur", function(){\r
-                       jQuery(id + "lblur").blink();\r
-               });\r
-\r
-               return this.bind("change", function(e){\r
-                       jQuery(id + "bind").blink();\r
-               }).live("change", function(e){\r
-                       if ( prevent ) {\r
-                               e.preventDefault();\r
-                       }\r
-\r
-                       jQuery(id).blink();\r
-               });\r
-       };\r
-\r
-       jQuery.fn.addSubmitTest = function( id, prevent ) {\r
-               return this.live("submit", function(e){\r
-                       if ( prevent ) {\r
-                               e.preventDefault();\r
-                       }\r
-\r
-                       jQuery(id).blink();\r
-               });\r
-       };\r
-\r
-       jQuery.fn.blink = function(){\r
-               return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){\r
-                       jQuery(this).css("backgroundColor","");\r
-                       next();\r
-               });\r
-       };\r
-\r
-       $(document).bind("focusin", function() {\r
-               jQuery("#boundFocus").blink();\r
-       });\r
-       \r
-       $(document).bind("focusout", function() {\r
-               jQuery("#boundBlur").blink();\r
-       });\r
-\r
-       $("td.red").live("hover", function(e) {\r
-               if ( e.type === "mouseenter" ) {\r
-                       $(this).css("backgroundColor","green");\r
-               } else {\r
-                       $(this).css("backgroundColor","");\r
-               }\r
-       });\r
-\r
-       $(".select_test").addChangeTest("#select");\r
-       $(".mselect_test").addChangeTest("#mselect");\r
-       $(".checkbox_test").addChangeTest("#checkbox");\r
-       $(".radio_test").addChangeTest("#radio");\r
-       $('textarea').addChangeTest("#textarea");\r
-       $('#input').addChangeTest("#text");\r
-       $(document).bind("change", function(){\r
-               jQuery("#boundChange").blink();\r
-       });\r
-       \r
-       $("#text_submit").addSubmitTest("#textSubmit", true);\r
-       $("#password_submit").addSubmitTest("#passwordSubmit", true);\r
-       $("#submit_submit").addSubmitTest("#submitSubmit", true);\r
-       $(document).bind("submit", function(){\r
-               jQuery("#boundSubmit").blink();\r
-       });\r
-       \r
-        </script>\r
-    </body>\r
-</html>\r
+<html>
+    <head>
+        <script src='../dist/jquery.js' type='text/javascript'></script>
+        <style>
+       .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>
+               <select class='select_test'>
+                   <option value='one'>change me 1</option>
+                   <option value='two' selected="selected">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="file_test" id="file1" type="file"/>
+               <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='file' class="red">FILE</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='filebind' class="red">FILE</td>
+               <td id='textbind' class="red">TEXT</td>
+               <td id='textareabind' class="red">TEXTAREA</td>
+           </tr>
+           <tr>
+               <td>Focusin:</td>
+               <td id='selectfocus' class="red">SELECT</td>
+               <td id='mselectfocus' class="red">MULTI</td>
+               <td id='checkboxfocus' class="red">CHECKBOX</td>
+               <td id='radiofocus' class="red">RADIO</td>
+               <td id='filefocus' class="red">FILE</td>
+               <td id='textfocus' class="red">TEXT</td>
+               <td id='textareafocus' class="red">TEXTAREA</td>
+               <td id='boundFocus' class="red">DOCUMENT</td>
+           </tr>
+           <tr>
+               <td>Focusout:</td>
+               <td id='selectblur' class="red">SELECT</td>
+               <td id='mselectblur' class="red">MULTI</td>
+               <td id='checkboxblur' class="red">CHECKBOX</td>
+               <td id='radioblur' class="red">RADIO</td>
+               <td id='fileblur' class="red">FILE</td>
+               <td id='textblur' class="red">TEXT</td>
+               <td id='textareablur' class="red">TEXTAREA</td>
+               <td id='boundBlur' class="red">DOCUMENT</td>
+           </tr>
+           <tr>
+               <td>Live Focus:</td>
+               <td id='selectlfocus' class="red">SELECT</td>
+               <td id='mselectlfocus' class="red">MULTI</td>
+               <td id='checkboxlfocus' class="red">CHECKBOX</td>
+               <td id='radiolfocus' class="red">RADIO</td>
+               <td id='filelfocus' class="red">FILE</td>
+               <td id='textlfocus' class="red">TEXT</td>
+               <td id='textarealfocus' class="red">TEXTAREA</td>
+           </tr>
+           <tr>
+               <td>Live Blur:</td>
+               <td id='selectlblur' class="red">SELECT</td>
+               <td id='mselectlblur' class="red">MULTI</td>
+               <td id='checkboxlblur' class="red">CHECKBOX</td>
+               <td id='radiolblur' class="red">RADIO</td>
+               <td id='filelblur' class="red">FILE</td>
+               <td id='textlblur' class="red">TEXT</td>
+               <td id='textarealblur' 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>$(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'>
+       jQuery.fn.addChangeTest = function( id, prevent ) {
+               this.bind("focusin", function(){
+                       jQuery(id + "focus").blink();
+               }).bind("focusout", function(){
+                       jQuery(id + "blur").blink();
+               });
+
+               this.bind("focus", function(){
+                       jQuery(id + "lfocus").blink();
+               }).bind("blur", function(){
+                       jQuery(id + "lblur").blink();
+               });
+
+               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();
+               });
+       };
+
+       $(document).bind("focusin", function() {
+               jQuery("#boundFocus").blink();
+       });
+
+       $(document).bind("focusout", function() {
+               jQuery("#boundBlur").blink();
+       });
+
+       $("td.red").live("hover", function(e) {
+               if ( e.type === "mouseenter" ) {
+                       $(this).css("backgroundColor","green");
+               } else {
+                       $(this).css("backgroundColor","");
+               }
+       });
+
+       $(".select_test").addChangeTest("#select");
+       $(".mselect_test").addChangeTest("#mselect");
+       $(".checkbox_test").addChangeTest("#checkbox");
+       $(".radio_test").addChangeTest("#radio");
+       $(".file_test").addChangeTest("#file");
+       $('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>