git.asbjorn.biz / jquery.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Adding in support for bubbling submit and change events, thanks to the patch by Justi...
[jquery.git] / test / delegatetest.html
diff --git a/test/delegatetest.html b/test/delegatetest.html
new file mode 100644 (file)
index 0000000..c580b29
--- /dev/null
+++ b/test/delegatetest.html
@@ -0,0 +1,123 @@
+<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</label><br/>\r
+                        <input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>\r
+                        <label for="checkbox2">Checkbox 2 label</label>\r
+                    </td>\r
+                    <td>\r
+                        <input type="radio" class="radio_test" name="myradio" id="radio1"/>\r
+                        <label for="radio1">Radio 1 label</label><br/>\r
+                        <input type="radio" class="radio_test" name="myradio" id="radio2"/>\r
+                        <label for="radio2">Radio 2 label</label>\r
+                    </td>\r
+                    <td>\r
+                        <input class='test' value='' id='input' size='10' />\r
+                    </td>\r
+                    <td>\r
+                        <textarea rows='2'></textarea>\r
+                    </td>\r
+                    <td>$().bind('change')</td>\r
+                </tr>\r
+                <tr>\r
+                    <td>Results:</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
+        </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>$().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
+\r
+        <script type='text/javascript'>\r
+            makeChangeFunc = function(id, prevent){\r
+                return function(e){\r
+                    if(prevent)\r
+                        e.preventDefault();\r
+                    $(id).css("backgroundColor","green").css("border","solid 3px green");\r
+                    setTimeout(function(){\r
+                        $(id).css("backgroundColor","");\r
+                    }, 700)\r
+                }\r
+            }\r
+            \r
+            $(".select_test").live("change",makeChangeFunc("#select"))\r
+            $(".mselect_test").live("change",makeChangeFunc("#mselect"))\r
+            $(".checkbox_test").live("change",makeChangeFunc("#checkbox"))\r
+            $(".radio_test").live("change",makeChangeFunc("#radio"))\r
+            $('textarea').live('change', makeChangeFunc("#textarea"))\r
+            $('#input').live('change', makeChangeFunc("#text"))\r
+            $().bind('change', makeChangeFunc("#boundChange"))\r
+            \r
+            $("#text_submit").live("submit", makeChangeFunc("#textSubmit", true) )\r
+            $("#password_submit").live("submit", makeChangeFunc("#passwordSubmit", true) )\r
+            $("#submit_submit").live("submit", makeChangeFunc("#submitSubmit", true) )\r
+            $().bind('submit', makeChangeFunc("#boundSubmit"))\r
+            \r
+        </script>\r
+    </body>\r
+</html>\r
JQuery