VML + IE + jQuery 1.3.2 has me confused
Hello - I'm working on a project where we use excanvas to draw charts
on our site in IE. We came across a bug where I had a selector of the
type ".classname :button.otherclassname". That was causing an error
to be thrown in IE7 from the preFilter.CLASS function in sizzle. I
removed the ":button" text from my selector and the error went away.
I have been trying to recreate this in a simple test case but I
haven't been able to recreate it exactly yet. I found this reported
issue: http://dev.jquery.com/ticket/4016 that seemed to be similar and
used its example to create what I'll include below.
With this example it seems that when I select an element using its
class name after I draw the rounded corners the error occurs. If i
try to select an element using its ID it does not cause the error.
Can anybody provide me some insight as to why this is occuring? Is it
a bug in jQuery? Am I doing something incorrectly? Thanks.
This is the HTML that is causing the error in IE7. Clicking the "Click
me 2" link causes the error for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery 1.3.2 VMl Test Stuff</title>
<style type="text/css" media="screen">
#roundme {
width: 100px;
height: 100px;
position: relative;
background: red;
}
</style>
</head>
<body>
<div id="roundme">
<span class="goo">Foo</span>
</div>
<div class="foo">
<a id="bar" href="#">Click me.</a>
<input type="button" id="barbutton" class="barbutton" value="I'm a
button."/>
</div>
<div class="foo2">
<a id="bar2" href="#">Click me 2.</a>
<a href="#" id="barlink" class="barlink">I'm a link.</a>
</div>
<script src="http://code.jquery.com/jquery-1.3.2.js" type="text/
javascript"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
if ($.browser.msie) {
if (!document.namespaces.v) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var ss = document.createStyleSheet().owningElement;
ss.styleSheet.cssText = "v\\:*{behavior:url(#default#VML);}";
}
var roundrect = $('<v:roundrect arcsize="0.1" style="width:100px;
height:100px; position: absolute; top: 0; left: 0;"></v:roundrect>');
var roundme = $("#roundme");
roundme.append(roundrect);
}
$("#bar").click(function(e) {
alert($("#barbutton").attr("value"));
e.preventDefault();
});
$("#bar2").click(function(e) {
alert($(".barlink").text());
e.preventDefault();
});
});
</script>
</body>
</html>