CODEWITHSUNDEEP
jqueryhtmlajaxiframejquery-selectors
sodium
sodium

Reputation: 51

jQuery's selector doesn't work in iframe

I have code in iframe fragment (loaded by ajax), but only the $(".teacherBtn") works and binds the event handler correctly. But these selectors in callback function won't work. Only the second console.dir($(this)) have correct output. I have loaded jquery lib as normal page.

It seems that the $ function find the expression in parent window's document tree. But I tested this in a simple file and it shows when loaded the jq lib in iframe's document, the function will work in child window's document tree. I think there must be something wrong about scope or window element, but I don't know how to solve this.

I also wonder what the differences between importing the jq lib again and using $ = parent.$ are. I thought $ is just a function, but it turns out when importing the lib, $("exp") will find the element in iframe and $ = parent.$ will be in parent window's tags.

<script type="text/javascript">
        $(function(){
            $(".teacherBtn").bind('click',function(){
                console.dir($("#questRange"));
                console.dir($(this));
                console.dir($(".teacherBtn"));
            });
        });
</script>

All these .teacherBtn #questRange are in iframe fragment. Here is the html document, and these are in a iframe fragment. I use a jq plugin that helping pop up window, which is contained in a iframe section. I really don't want to use iframe.

<!doctype html>
<html>
<head>
    <style type="text/css">
        //some details
    </style>
    <script type="text/javascript" src="./js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".teacherBtn").bind('click',function(){
                console.dir($("#questRange")); //it works when change the id to that occured in parent window (out of iframe).
                console.dir($(this));
                console.dir($(".teacherBtn"));
            });
        });
    </script>
</head>
<body>
    <div id="teacherCtrl">
        <form name="questOpt" id="questOpt"  action="questCtrl.php" method='post'>
            <div id="questRange" class='optSection'>
               //some details
            </div>
            <div id="questCtrl" class='optSection'>
               //some details
            </div>
            <div id='questType' class='optSection'>
               //some details
            </div>
            <input type="button" value="show" id="showPaper" name="showPaper" class="teacherBtn"/>
            <input type="button" value="download" id="downDoc" name="downDoc" class="teacherBtn" />
            <input type="button" value="submit" id="olTestOpt" name="olTestOpt" class="teacherBtn"/>

        </form>
    </div>
</body>
</html>

And these code will be loaded to <iframe width="100%" scrolling="auto" frameborder="0" src="test/teacher.php" name="1991_content" id="1991_content" style="height: 495px;"></iframe> fragment. The iframe is created by the jq plugin.

Upvotes: 2

Views: 2769

Answers (1)

Matey Yanakiev
Matey Yanakiev

Reputation: 167

Try:

$("iframe").contents().find(/* selector goes here */);

Replace "iframe" with your CSS selector which you'll be using to find the frame.

Upvotes: 3

Related Questions