从父帧重定向时，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文件加载的，示例与上述超文本标记语言相关，如下所示

$('#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“属性)

我遇到的问题是，有时当我们加载这个选项卡页面时(而且只在we 9+中，IE7似乎没有这个问题)，我点击一个选项卡，什么也不会发生。CSS的悬停事件加载得很好，但单击选项卡什么也不做。但是，如果我单击一个选项卡，没有任何反应，我可以单击下一个选项卡，它将正常工作。类似地，如果我先在主内容框架中的任意位置单击，然后在选项卡上单击，它将始终触发事件处理程序。

我们注意到这个问题几乎完全发生在我们试图从父框架指向选项卡式页面时(我们在上面有一个快速搜索)，并且我们使用Response.Redirect来加载带有选项卡页的iframe。我尝试将这个快速搜索重定向到iframe中的一个登录页面，然后使用Response.Redirect将我们带到选项卡页面，但它最终得到了相同的结果。当我们从iframe (Target="_self")中点击一个超链接时，它工作得很好。

这个问题不会在火狐、Chrome或IE7中发生，但在IE9+中会发生。

有没有人有什么想法，想法，已知的bug，诸如此类的东西？

Answer 1

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

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