Question

我有iframe片段中的代码（由ajax加载），但只有$(".teacherBtn")可以正常工作并绑定事件处理程序。但回调函数中的这些选择器将无法正常工作。只有第二个console.dir($(this))具有正确的输出。我已经将jquery lib加载为普通页面。

似乎$函数在父窗口的文档树中找到expression。但我在一个简单的文件中对此进行了测试，它显示了在iframe's文档中加载jq lib时，该函数将在子窗口的文档树中工作。我认为范围或窗口元素一定有问题，但我不知道如何解决这个问题。

我也想知道再次导入jq lib和使用 $ = parent.$ 之间的区别是什么。我认为$只是一个函数，但是在导入lib时，$("exp")会发现iframe中的元素和 $ = parent.$ 中的元素将位于父窗口的标记中。< / p>

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

所有这些.teacherBtn #questRange都在iframe片段中。这是html文档，它们位于iframe片段中。我使用了一个帮助弹出窗口的jq插件，该窗口包含在iframe部分中。我真的不想使用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>

这些代码将加载到<iframe width="100%" scrolling="auto" frameborder="0" src="test/teacher.php" name="1991_content" id="1991_content" style="height: 495px;"></iframe>片段。 iframe由jq插件创建。

Answer 1

尝试：

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

将"iframe"替换为您将用于查找框架的CSS选择器。

jQuery的选择器在iframe中不起作用

1 个答案: