부모 프레임에서 리디렉션 된 경우 iframe jquery 이벤트 처리기가 실행되지 않음

Question

Google 솔루션은 상위 프레임과 기본 콘텐츠 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와 이벤트 핸들러

는

$('#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'); 
}); 

예를 들어 다음과 같이 위의 HTML에 관한, 로컬의 .js 파일에서로드합니다 (클릭 이벤트 그냥 "SRC를"변경은 iframe의 속성)

필자가 겪고있는 문제는이 탭 페이지를로드 할 때 (Internet Explorer 9 이상에서만 IE7에이 문제가없는 것처럼 보임) 탭을 클릭하면 아무 것도 나타나지 않는다는 것입니다. CSS의 호버 이벤트는 잘로드되지만 탭을 클릭하면 아무 것도 수행되지 않습니다. 그러나 하나의 탭을 클릭해도 아무런 변화가 없으면 다음을 클릭하면 정상적으로 작동합니다. 마찬가지로 메인 컨텐츠 프레임의 아무 곳이나 클릭 한 다음 탭에서 클릭하면 항상 이벤트 핸들러가 실행됩니다.

상위 프레임에서 탭이있는 페이지로 이동하려고 할 때이 문제가 거의 발생하지 않았으며 Response.Redirect를 사용하여 탭 페이지로 iframe을로드합니다. 이 quicksearch를 Response.Redirect를 사용하여 탭 페이지로 가져 오는 iframe 내부의 방문 페이지로 리디렉션하려고했지만 동일한 결과가 나타납니다. iframe 내부에서 하이퍼 링크를 클릭하면 (Target = "_ self"), 정상적으로 작동합니다.

이 문제는 Firefox, Chrome 또는 IE7에서는 발생하지 않지만 IE9 +에서는 발생합니다.

누구나 내가 생각하지 못한 생각, 아이디어, 알려진 버그가 있습니까?

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

그냥 선택 부분을 원하는 셀렉터 (I는 "#topRow div.tab"을 의미)을 변경 다른 이벤트에 대해 동일한 작업을 수행합니다

Answer 1

이 당신이 요소에 이벤트를 바인딩하는 방법이다.