I have an iframe in a page which contains another page from within my application. The iframe contents include a button that, when clicked, will trigger a custom event on the parent document. While I can listen to the click event on the button from the IFRAME parent, i cannot listen to the custom event. Strange.
Parent: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("iframe").load(function(e) { $(this).contents().find("#portlet").bind("updated", function(e) { alert("click"); }); }); }); </script> </head> <body> <script language="JavaScript"></script> <iframe src="frame.jsp" id="myframe"></iframe> </body> </html> IFRAME: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button#framer").click(function(e) { var e = new jQuery.Event("updated"); $("#portlet").trigger(e); }); }); </script> <style type="text/css"> #portlet { display: none; } </style> </head> <body> <div id="portlet"></div> <button id="framer">Click Me</button> </body> </html> Optimally, I think it makes sense to trigger the "updated" event on the document, rather than the hidden div - but neither seems to work. Should I expect this behavior to work as I intend it to, or am I hitting some limitation?