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

【问题标题】：jQuery's selector doesn't work in iframejQuery 的选择器在 iframe 中不起作用
【发布时间】：2011-12-04 00:01:24
【问题描述】：

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

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

我也想知道再次导入 jq lib 和使用 $ = parent.$ 有什么区别。我以为$只是一个函数，但结果是在导入lib时，$("exp")会在iframe中找到元素， $ = parent.$ 会在父窗口的标签中。

<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 插件创建。

【问题讨论】：

我很困惑。如果您已经知道如何使用 Ajax 加载内容，那您到底为什么需要 iframe？
@RobW 感谢您的关注。我已经对其进行了编辑并添加了必要的信息。
@Sparky672 感谢您的关注。我已经对其进行了编辑并添加了必要的信息。
@Sparky672 也感谢您编辑我的帖子。我不是以英语为母语的人，也不是 stackoverflow 的新手，所以为我的错误道歉。

标签： jquery html ajax iframe jquery-selectors

【解决方案1】：

试试：

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

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

【讨论】：