Question

J'ai un problème quand je l'aide de l'interface utilisateur onglets et charger une page externe dans le tabcontent-DIV. Une fois la page chargée, tous jQueries pour cette page ne semble pas travailler plus. J'ai lu quelque chose sur callbacks, mais il ne sait pas du tout.

Exemple: je charge une page externe par ui-onglets, et le contenu chargé comprend un DIV, qui devrait cacher automatiquement jQueried dans index.html Le clic-événement jQuery est ajouté que pour montrer qu'un live événement fonctionne. Mais je ne peux pas obtenir le travail de masquage automatique, après le chargement du contenu.

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>

Qu'est-ce que je suis absent?

Était-ce utile?

La solution

Liez vos événements est déclenché après l'événement de chargement de l'onglet ...

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

Vous essayez de lier à un élément qui n'a pas (encore). Vous devez lier après le chargement de l'objet, et l'écoute de l'événement est la meilleure façon de le faire.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top