从父框架重定向时，iframe jquery 事件处理程序未触发

Question

我们的解决方案使用父框架和主要内容 iframe 运行。主要内容 iframe 中的一个页面设置了一系列用作选项卡的 div，示例如下。

<div id="topRow">
    <div class="mainInformation tab tabSelected" runat="server" id="mainInformationTop">
        <div class="tabLeft">
            <div class="tabMain">
                Main Information
            </div>
        </div>
    </div>
    <div class="executives tab" runat="server" id="executivesTop">
        <div class="tabLeft">
            <div class="tabMain">
                Executives
            </div>
        </div>
    </div>                
</div
<div id="secondRow">
    <div id="mainInformationTabGroup" runat="server" class="mainInformation tabGroup">
        <div id="overview" runat="server" class="tab tabSelected overview">
            <div class="tabLeft">
                <div class="tabMain">
                    Overview
                </div>
            </div>
        </div>
        <div id="locations" runat="server" class="tab locations">
            <div class="tabLeft">
                <div class="tabMain">
                    Locations
                </div>
            </div>
        </div>
    </div>
    <div id="executivesTabGroup" runat="server" class="executives tabGroup" style="display: none">
        <div id="companyExecutives" runat="server" class="tab companyExecutives">
            <div class="tabLeft">
                <div class="tabMain">
                    Company Executives
                </div>
            </div>
        </div>
        <div id="affiliatedExecutives" runat="server" class="tab affiliatedExecutives">
            <div class="tabLeft">
                <div class="tabMain">
                    Affiliated Company Executives
                </div>
            </div>
        </div>
    </div
</div>

jquery 事件处理程序是从本地 .js 文件加载的，与上述 HTML 相关的示例如下

$('#topRow div.tab').click(function() {
    $('#topRow div.tabSelected').removeClass('tabSelected');
    $(this).addClass('tabSelected');
})
$('#topRow .mainInformation').click(function() {
    $('#secondRow').css('display', 'block');
    $('#thirdRow').css('display', 'none');
    resizeAllIframes();
    $('#secondRow .tabGroup').css('display', 'none');
    $('#secondRow .mainInformation').css('display', 'block');
    $('#secondRow .mainInformation div.tab').not('.locked').children().first().trigger('click');
});
$('#topRow .executives').click(function(){
    $('#secondRow').css('display', 'block');
    $('#thirdRow').css('display', 'none');
    resizeAllIframes();
    $('#secondRow .tabGroup').css('display', 'none');
    $('#secondRow .executives').css('display', 'block');
    $('#secondRow .executives div.tab').not('.locked').children().first().trigger('click');
});

（点击事件只是改变了 iframe 的“src”属性）

我遇到的问题是，有时当我们加载这个标签页时（而且只有在 Internet Explorer 9+ 中，IE7 似乎没有这个问题），我会点击一个标签，但什么也不会发生。 CSS 的悬停事件加载得很好，但单击选项卡没有任何作用。但是，如果我单击一个选项卡但没有任何反应，我可以单击下一个选项卡，它会正常工作。同样，如果我先单击主内容框架中的任意位置，然后单击选项卡，它总是会触发事件处理程序。

当我们尝试从父框架（我们在那里有一个快速搜索）并使用 Response.Redirect 加载带有标签页的 iframe 时，我们几乎完全注意到了这个问题。我尝试将此快速搜索重定向到 iframe 内的登录页面，然后使用 Response.Redirect 将我们带到标签页，但最终得到相同的结果。当我们从 iframe (Target="_self") 内部单击超链接时，效果很好。

在 Firefox、Chrome 或 IE7 中不会出现此问题，但在 IE9+ 中会出现。

有没有人有任何想法、想法、我遗漏的已知错误，诸如此类？

Answer 1

这是将事件绑定到元素的方式：

$(document).bind('click','#topRow div.tab',function() {
    $('#topRow div.tabSelected').removeClass('tabSelected');
    $(this).addClass('tabSelected');
});

对其他事件执行完全相同的操作，只需使用所需的选择器更改选择器部分（我的意思是“#topRow div.tab”）。