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的＆＃34; src＆＃34;属性）

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

我们已经注意到这个问题几乎完全发生在我们尝试从父框架指向标签页时（我们在那里有一个快速搜索），我们使用Response.Redirect加载带有标签页的iframe 。我已尝试将此quicksearch重定向到iframe内的目标网页，然后使用Response.Redirect将我们转到标签页，但最终会得到相同的结果。当我们从iframe内部点击超链接时（Target =＆＃34; _self＆＃34;），这样就可以了。

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

有没有人有任何想法，想法，我所遗漏的已知错误，这类似的东西？

Answer 1

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

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

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

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

1 个答案: