Interface utilisateur charge Onglet page externe, jQueries ne fonctionne plus
-
23-09-2019 - |
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?
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.