jquery click handler inside frame isn't working

Question

I can't make the following code attach a click handler to the elements on the "main" frame. This code is in the frameset definition.

<!-- #include file ="..\include\AuthenticationCheck.asp" --> 
<!-- #include file ="..\include\serverValidate.asp" --> 

<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual InterDev 1.0">
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<title>Raider Writer Student Roll</title>
<script type="text/javascript" src="../include/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../include/js/jquery-ui-1.8.4.custom.min.js"></script>

<script type="text/javascript">

    $(function(){//document ready

       $("#main").ready(function () { //The function below executes once the iframe has finished loading

                  $("#main .confirmLink").click(function(e) {
                    alert('hi');

                    });
                });


} );
</script>

</head>
<%
    course_id=request("course_Id")
    if ValidateNumber(course_id)=false then 
        err.raise 8,"Validation: <course_id> is Invalid","<course_id> is: " & course_id
    End if


%>
<%session("currentpage")="tracking"%>

<frameset rows="100,*" border="0">
  <frame name="banner" id="banner" scrolling="no" target="contents" src="rollbanner.asp?course_id=<%response.write(course_id)%>">
  <frameset cols="16%,*" border="5">
    <frame name="contents" id="contents" src="roll.asp?course_id=<%response.write(course_id)%>">



        <frame name="main" id="main" src="../action/helpread.asp?dm=trackingdocs">

  </frameset>
  <noframes>
  <body>
  <p>This page uses frames, but your browser doesn't support them.</p>

  </noframes>
</frameset>


</body>
</html>

possible duplicate of [JQuery and frames - $(document).ready doesn't work](http://stackoverflow.com/questions/221192/jquery-and-frames-document-ready-doesnt-work) — Matt Ball, Sep 14 '10 at 20:44
I don't think this is about when the "ready" fires, as he's waiting for both here. — Pointy, Sep 14 '10 at 21:33

Pointy · Answer 1 · 2010-09-14T22:57:15.363

1

You can't look inside the DOM of a <frame> that way. Try this:

$('#main').contents().find('.confirmLink').click(function() { ... });

Now, even that might have problems in some circumstances. If the page in the frame also imports jQuery, then you can do this:

$('#main').get(0).contentWindow.$('.confirmLink').click(function() { ... });

That would use the frame's own jQuery to set up the handler.

edited Sep 14 '10 at 22:57

answered Sep 14 '10 at 21:32

Pointy

405,095
59
585
614

Kenneth J · Accepted Answer · 2010-09-14T20:47:37.750

0

Did you try using #main as the context?

$(".confirmLink","#main").click(function(e) {('hi');});

or changing $("#main").ready(fn) to $("#main").load(fn)

edited Sep 14 '10 at 20:47

answered Sep 14 '10 at 20:42

Kenneth J

4,846
11
39
56

That won't change anything. The "context" is just syntactic sugar. – Matt Ball Sep 14 '10 at 20:45

score 0 · Answer 3 · answered Sep 14 '10 at 20:45

Without doing a bunch of research I'd say it's probably a "document ready" issue. You are waiting for the parent document, but not the frame document. The parent document is considered "loaded" once all the elements for that page. Since frames are not technically part of the page, but rather a page unto themselves they are not considered.

If you have control of the page loaded into the frame a quick work around would be to encapsulate that jQuery call in a function and then call that function in the frame's page.

... except he's doing the work in a "ready" handler on the frame. — Pointy, Sep 14 '10 at 21:33

jquery click handler inside frame isn't working

3 Answers3