forked from G3dFX50/tekkub.github.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchrome-does-not-disable.html
73 lines (63 loc) · 1.97 KB
/
chrome-does-not-disable.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title> Chrome doesn't disable! </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
p { max-width: 512px; }
pre {
background: #eee;
margin-bottom: 20px;
padding: 5px;
max-width: 700px;
}
button { height: 40px; }
span {
background: #fcc;
padding: 2px;
}
ul li { list-style-type: none; }
</style>
</head>
<body>
<p>
It seems that even when you set the "disabled" attribute on a button that
has a span in it, Chrome still calls the "click" bindings if you click the
span, even though it shouldn't. To demonstrate this, I'm using the
following jQuery code on this page. The span in the button is highlighted
in red.
</p>
<pre>$(function() {
$('button').live('click', function(){
var el = $(this),
list = $("ul")
var hasSpan = (el.find('span').length > 0) && "with span" || "without span"
var wasDisabled = el.attr('disabled') || "not set"
list.append(
$("<li>").text("Button " + hasSpan + " clicked, disabled attr was " + wasDisabled)
)
el.attr('disabled', 'disabled')
return true
})
});</pre>
<button>Click me, I don't have a span.</button>
<button><span>Click me, I have a span.</span></button>
<ul></ul>
<script type="text/javascript">
$(function() {
$('button').live('click', function(){
var el = $(this),
list = $("ul")
var hasSpan = (el.find('span').length > 0) && "with span" || "without span"
var wasDisabled = el.attr('disabled') || "not set"
list.append(
$("<li>").text("Button " + hasSpan + " clicked, disabled attr was " + wasDisabled)
)
el.attr('disabled', 'disabled')
return true
})
});
</script>
</body>
</html>