UI Tab load external page, jQueries not working anymore_问答_开发者

UI Tab load external page, jQueries not working anymore

开发者 https://www.devze.com 2022-12-18 00:07 出处：网络

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 callb

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.