Le sélecteur jquery sur le contenu chargé ajax échoue

Question

J'ai une boîte de dialogue qui est chargée via ajax. Le paylaod de cet ajax contient à la fois html et javascript.

La boîte de dialogue s'affiche très bien et le JS inclus dans cette charge s'exécute.

Cependant, je suis incapable de sélectionner des éléments (que ce soit par id, classe ou type d'élément) du JS dans la charge utile.

permet de dire que la charge utile avait:

<div> 
    <ul id="testid"> 
    <li>A</li> 
    <li>B</li> 
    </ul> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     console.info('test: ' + $("#testid").length); 
    }); 
</script> 

Il en résulte test: 0 apparaissant dans la console.

Si je change le sélecteur pour sélectionner 'body', alors il en résulte une valeur différente de zéro. Il est clair que le contenu chargé est affiché et que le JS qu'il contient est en cours d'exécution. Je crois comprendre que l'appel .ready() devrait permettre à l'heure DOM d'être mise à jour pour inclure la charge html. Malheureusement, dans ce cas, je n'ai aucun contrôle direct sur la charge ajax elle-même car j'utilise un cadre qui fait la fonctionnalité de dialogue pour moi (zotonique). Ce qui est bizarre, c'est que d'autres pages chargées ajax qui ont des éléments JS qui sélectionnent des éléments dans la charge utile ajax fonctionnent - c'est juste la boîte de dialogue qui (jusqu'ici) semble échouer.

Je n'arrive pas à comprendre pourquoi tout cela ne va pas. J'ai fait ma diligence raisonnable et ai cherché google etc. pendant les deux derniers jours sans solution donc pensé que j'aurais crié pour l'aide ici.

Jason

Answer 1

Je crois ready ne fonctionne que la première fois que la page se charge. Si vous dépendez du résultat d'un appel AJAX, vous devez utiliser un rappel car l'opération est asynchrone. Est-ce que zotonic vous offre des crochets que vous pouvez utiliser? Sinon, ça va être un peu plus difficile. Peut-être que vous pouvez interroger les DOM comme celui-ci, à la page charge:

<script type="text/javascript"> 
    $(document).ready(function() { 
     var interval = setInterval(function() {   
      if($("#testid").length > 0) { 
       clearInterval(interval); 
       console.info('test: ' + $("#testid").length); 
      } 
     }, 750); 
    }); 
</script> 

Cela leur requête de la page toutes les 750ms pour #testid. S'il trouve l'élément, l'intervalle est annulé et vous devriez obtenir une sortie de console.