当从父框架重定向时,jquery事件处理程序不会触发

本文关键字:程序 事件处理 jquery 框架 重定向 | 更新日期: 2023-09-27 18:08:57

我们的解决方案使用父框架和主内容框架运行。主内容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的悬停事件加载得很好,但是单击选项卡没有任何作用。然而,如果我点击一个标签,什么都没有发生,我可以点击下一个,它会工作得很好。类似地,如果我先单击主内容框架中的任何位置,然后单击选项卡,它将始终触发事件处理程序。

我们注意到这个问题几乎完全发生在我们试图从父框架直接到选项卡页面时(我们在那里有一个快速搜索),我们使用响应。重定向以加载带有选项卡页的iframe。我尝试将这个快速搜索重定向到iframe内的登录页面,然后使用响应。重定向将我们带到标签页,但它最终得到相同的结果。当我们从iframe (Target="_self")内部点击超链接时,它工作得很好。

此问题在Firefox, Chrome或IE7中不会发生,但在IE9+中会发生。

有没有人有任何想法,想法,已知的错误,我错过了,任何类似的东西?

当从父框架重定向时,jquery事件处理程序不会触发

将事件绑定到元素:

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

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