UI Tab load external page, jQueries not working anymore

StackOverflow https://stackoverflow.com/questions/2143307

Question

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?

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top