Accès javascript principal après jQuery load

Question

Je cherche un moyen de charger une page (page A) (que je crée aussi - donc pas une page externe sur le web) dans une page existante (page B) dynamiquement. Le but est d'influencer le comportement de la page A dans le Javascript/jquery utilisé sur la page B. Exemple: quand un bouton dans la pageA est cliqué, je veux que Javascript sur la page B réagisse à cela.

J'ai essayé d'y arriver en utilisant la fonction de charge() $() jQuery, mais cela ne me permet pas d'appeler le javascript de la page B de la page A.

Le code concret:. ma page B contient ceci:

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ }); 
}); 

et moi avons une fonction qui ajoutera un nouvel onglet au contenu du carrousel et la charge à partir d'une page (a) dans cet onglet.

$('.ref').click(function() { 
     var newTabId = jQuery('#mycarousel').jcarousel('size') + 1; 
     carousel 
       .add(
         newTabId, 
         "<li style='width: 50%;'><div id='tab" + newTabId + "' style='height: auto;'></div></li>"); 
     // load content 
     $("#tab" + newTabId).load("/relativepath/" + $(this).attr('id')); 
    }); 

Cela fonctionne pour le contenu statique (donc quand j'ai des onglets statiques dans le carrousel). Maintenant, je veux que cela fonctionne aussi pour les onglets qui sont ajoutés dynamiquement. Exemple: Phase 1: [tab 1] [tab 2] je clique sur un bouton à l'intercalaire 1, un nouvel onglet est créé et le contenu est chargé à partir de/a/rapport/chemin

Pase 2: [ onglet 1] [onglet 2] [onglet 3] Je clique sur un bouton de l'onglet 3 et un nouvel onglet devrait être ajouté et le contenu d'un autre chemin relatif devrait être chargé dans le carrousel.

J'espère que je fait mes questions claires :)

Answer 1

Vous avez besoin de la méthode « .on() » ... Chaque fois que je vois une question AJAX et obligatoire ce qui est généralement la réponse.

$('body').on("click", '.ref', function() { 
    var newTabId = jQuery('#mycarousel').jcarousel('size') + 1; 
    carousel.add(newTabId, 
     "<li style='width: 50%;'><div id='tab" + newTabId + "' style='height: auto;'></div></li>"); 
    // load content 
    $("#tab" + newTabId).load("/relativepath/" + $(this).attr('id')); 
}); 

Basé hors votre question, je ne sais pas si cela résout votre problème, mais vous remarquerez que lorsque vous utilisez « .on() » au lieu de « .cliquez() » il regarde le sélecteur initial élément pour un 'clic' sur '.ref' peu importe si l'élément existe quand le javascript/jQuery est analysé, ou après qu'un élément de '.ref' soit ajouté au DOM.