UI Tab load external page, jQueries not working anymore
I've got a problem when i using UI Tabs and load an external page into the tabcontent-DIV. When the page has loaded, all jQueries for this page seems not to work anymore. I read something about callbacks, but it's not clear at all.
Example: I load an external page by ui-tabs, and the 开发者_开发问答loaded content includes a DIV, that should hide automatically as jQueried in index.html The jQuery click-event is only added to show that a live-event is working. But i can't get the auto-hide working, after loading the content.
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>
What am i missing?
Bind your events after the tab's load event is triggered...
$('#tabs')
.bind('tabsload', function(event, ui) {
$('#autohideafterload').hide('slow');
})
.tabs();
You're trying to bind to an element that doesn't (yet) exist. You need to bind after the item loads, and listening to the event is the best way to do this.
加载中,请稍侯......
精彩评论