2010-01-26 3 views
0

UI 탭을 사용하고 외부 페이지를 tabcontent-DIV에로드 할 때 문제가 있습니다. 페이지가로드되면이 페이지의 모든 jQuery가 더 이상 작동하지 않는 것 같습니다. 나는 콜백에 대해 읽었지만 전혀 명확하지 않다.UI 탭 외부 페이지로드, 더 이상 작동하지 않는 jQuery

예 : ui-tabs로 외부 페이지를로드하고로드 된 콘텐츠에 index.html에서 jQueried로 자동으로 숨겨져있는 DIV가 포함됩니다. jQuery 클릭 이벤트는 라이브 이벤트 일하고있다. 하지만 콘텐츠를로드 한 후 자동 숨기기 작업을 수행 할 수 없습니다.

index.html을

<script type="text/javascript"> 

    jQuery(document).ready(function() { 

     // define tabs 
     $('#tabs').tabs(); 

     // after loading external page, the div "autohideafterload" will automatically hide. 
     $('#autohideafterload').hide('slow'); 

     $('#autohideafterload').live('click', function() { 
      $('#autohideafterload').hide('slow'); 
     }); 

    }); 

    </script> 

</head> 


<body> 

    <div id="tabs"> 
     <ul> 
      <li><a href="loadcontent.html" title="tabcontent"><span>Load data</span></a></li> 
     </ul> 
    </div> 

    <div id="tabcontent"></div> 

</body> 
</html> 

loadcontent.html

<div id="autohideafterload">This div will hide automatically after loaded this external page.</div> 

내가 무슨 말이냐? 탭의로드 이벤트가 트리거 후에는 (아직) 존재하지 않는 요소에 바인딩하려는

$('#tabs') 
    .bind('tabsload', function(event, ui) { 
     $('#autohideafterload').hide('slow'); 
    }) 
    .tabs(); 

답변

1
는 ... 이벤트를 바인딩

. 항목을로드 한 후에 바인딩해야하며 이벤트를 수신하는 것이이 작업을 수행하는 가장 좋은 방법입니다.

+0

좋아,하지만이 외부로드 된 페이지에 바인딩 할 요소가 많은 경우이 방법으로 구분 된 이러한 요소를 바인딩해야합니까? 나는 이것이 많은 일이라고 생각한다. 다른 방법이 없습니까? –

관련 문제