Ticket #739 (closed bug: invalid)
problem with all event binding functions in jquery 1.04 when used in iframe to bind event to parent frame (IE 7)
| Reported by: | zihan | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.1.3 |
| Component: | event | Version: | 1.1a |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
test.htm
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.1EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en"> <head>
<title>Test</title>
</head> <body>
<div class='pak2' id="pak1"> test </div>
<iframe src="jq.htm"></iframe> </body> </html>
jq.htm
<script src="jquery.js" type="text/javascript"></script> <script> $(parent.document.body).find(".pak2").fadeTo(200,0.1); parent.document.getElementById("pak1").onmouseover=function(){alert('pak1')}; $(parent.document.body).find(".pak2").mouseover(function(){alert("this will not pop up.. ")}) </script>
Expected
As per Firefox 2.01: 2 alert messages
Behaviour in IE 7
Nothing happens.
If you remove the last line (the line that uses the $().mouseover()), the first alert happens.
Notes
This problem exists with other similar jquery event functions like hover, etc.
Side note/Possible bug
Changing the expression in find() from ".pak2" to "#pak1" does not return you the same behaviour as using ".pak2"
Change History
comment:3 Changed 6 years ago by anonymous
- Status changed from closed to reopened
- Resolution invalid deleted
How is this bug invalid? I just tested it and the problem still exists in jquery 1.1b..
Is it invalid because if you include the jquery library in the parent frame AND then call the parent frame's jquery function, i.e.
parent.$(parent.document.body)
the problem will go away? I hardly see that as being a proper resolution as perhaps the reason why the functionality isn't done in the parent frame directly is because for whatever reason the parent frame cannot include the jquery file.. such as it using other libaries that too overload the $() operator for example, and hence has delegated jquery functionalities to an iframe with its own javascript instance.
comment:4 Changed 6 years ago by brandon
Putting jQuery in an IFrame just to avoid $ conflicts would cause a lot of extra trouble that isn't needed.
Just call jQuery.noConflict() after including jQuery and then you can reassign the jQuery alias to whatever you want.
jQuery.noConflict(); var $j = jQuery;
Now use $j instead of $ for jQuery methods.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Loading jQuery from test.htm seems to solve the problem...weird...
test.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Test</title> <script src="jquery.js" type="text/javascript"></script> </head> <body> <div class="pak2" id="pak1">test</div> <iframe src="jq.htm"></iframe> </body> </html>jq.htm
<script> parent.$(parent.document.body).find(".pak2").fadeTo(200,0.5); parent.document.getElementById("pak1").onclick = function() { alert('pak1'); }; parent.$(parent.document.body).find(".pak2").click(function() { alert("this will not pop up.. "); }); </script>