Bug Tracker

Ticket #3602: bug.2.html

File bug.2.html, 2.3 KB (added by rolandpoulter, 12 years ago)

Test Case

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head>
5
6        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
8        <title>jQuery Bug</title>
9        <style type="text/css" media="screen">
10                body {
11                        font: normal 12px/1.1em Arial, sans-serif;
12                }
13                pre {
14                        font: normal 13px/1.1em Courier, monospace;
15                        background: #151515;
16                        color: #fff;
17                        padding: 3px;
18                        border: 2px solid #666;
19                }
20                pre .grey {color: #abaeae;}
21                pre .green {color: #62b040;}
22                pre .neon {color: #99cf4a;}
23                pre .orange {color: #e28964;}
24                pre .brown {color: #c56a4d;}
25                pre .blue {color: #3387a8;}
26                pre .purple {color: #9b859d;}
27                pre .yellow {color: #dad085;}
28        </style>
29
30</head>
31<body>
32
33        <a id="link" href="#">Test Link</a>
34        <p>Click anywhere, the click handler was bound to the window, when it should not have. It should only be on "Test Link".</p>
35        <script type="text/javascript" charset="utf-8">
36                var
37                link = document.getElementById('link'),
38                other = document.getElementById('noExist'); // other element, maybe it is null
39
40                // Okay now lets attach a click handler to both values
41                jQuery([link, null]).bind('click', function (e) {
42                        alert('You just clicked on a <' + e.target.tagName + '> element');
43                });
44        </script>
45        <h2>Code:</h2>
46        <pre>
47<span class="neon">var</span>
48link <span class="orange">=</span> <span class="purple">document</span>.<span class="yellow">getElementById</span>(<span class="green">'link'</span>),
49other <span class="orange">=</span> <span class="purple">document</span>.<span class="yellow">getElementById</span>(<span class="green">'noExist'</span>); <span class="grey">// other element, maybe it is null</span>
50
51<span class="grey">// okay, now lets attach a click handler to both values</span>
52jQuery([link, <span class="blue">null</span>]).bind(<span class="green">'click'</span>, <span class="neon">function</span> (<span class="blue">e</span>) {
53  <span class="yellow">alert</span>(<span class="green">'You just clicked on a &lt;'</span> <span class="orange">+</span> e.<span class="brown">target</span>.<span class="brown">tagName</span> <span class="orange">+</span> <span class="green">'&gt; element'</span>);
54});
55</pre>
56
57</body>
58</html>