Ne AJAX contenu chargé obtenir un document“.prêt”?

Hier, j'ai eu un problème où un .on('click') gestionnaire d'événements, j'ai été l'attribution n'a pas le droit de travailler. Il s'avère que c'est parce que j'étais a été d'essayer de l'appliquer .on('click') avant que l'élément existe dans les DOM, parce qu'il a été chargé via AJAX, et, par conséquent, n'existait pas encore lors de la document.ready() obtenu à ce point.

Je l'ai résolu avec une mauvaise solution, mais ma question est, si je devais mettre un <script> DANS la balise ajax chargé de contenu et un autre document.ready() à l'intérieur de cette, cette deuxième document.ready() être analysé SEULEMENT une fois que le contenu ajax est fait en cours de chargement? En d'autres termes, il considère que séparément chargé ajax contenu à un autre document, et si oui, le fait d'avoir un autre document.ready() à l'intérieur qu'ajax-HTML chargé fonctionner de la même manière je pense qu'il n'?

Alternativement; ce serait une meilleure façon de gérer cette situation? (besoin d'attacher un écouteur d'événement à un élément du DOM qui n'existe pas encore sur document.ready())

Pour les gestionnaires d'événements, l'utilisation de la délégation. Pour rien au monde (plugin d'initialisation, par exemple), utilisez la fonction de rappel pour votre appel AJAX.

InformationsquelleAutor | 2013-11-27

32

Pour répondre à votre question: Non, le document.sera pas le feu encore une fois une requête ajax est terminé. (Le contenu de l'ajax est chargé dans votre document, il n'existe pas un deuxième document pour le contenu ajax).

Pour résoudre votre problème, il suffit d'ajouter les écouteur d'événement à l'Élément sur lequel vous chargez de l'ajax contenu.
Par exemple:
```
$( "div.ajaxcontent-container" ).on( "click", "#id-of-the-element-in-the-ajax-content", function() {
  console.log($( this ));
});
```
Pour #id-of-the-element-in-the-ajax-content vous pouvez utiliser n'importe quel sélecteur vous utilisez $("selector"). La seule différence, c'est que seuls les éléments sous div.ajaxcontent-container sera sélectionné.

Comment cela fonctionne:
Aussi longtemps que div.ajaxcontent-container existe tous les éléments (si elles existent maintenant ou seulement dans le futur) qui correspondent au sélecteur de #id-of-the-element-in-the-ajax-content va déclencher cela cliquez sur l'événement.
- Merci! La plupart des réponses étaient les mêmes, mais la vôtre spécifiquement répondu à ma question et ensuite à expliquer les cas de délégation. Cheers!
- En fait le document.prêt sera appelée en ajax-HTML chargé. Essayez d'ajouter en ajax chargement de la page <script> $(function(){console.log ("message de l'ajax chargement de la page!!')}) </script>, et vous verrez que le message enregistré. Mais la fonction.prêt sur la page principale n'est pas déclenché après ajax.. juste pour être clair.
- Pouvez-vous m'expliquer ce fonction.prêt sur la page principale n'est pas déclenché après ajax
- regardez ce psedo page <parentPage> $(readyParentWhenParenLoaded) <ChildPage> $(readyChild) </ChildPage> </parentPage> Donc, lorsque vous chargez la page enfant de parent via un appel ajax readyParentWhenParenLoaded ne sera pas invoquée, mais readyChild va
InformationsquelleAutor nbar
10

Javascript dans le résultat de l'appel ajax ne sera pas excecuted (par défaut) pour des raisons de sécurité. Aussi, vous ne pouvez pas lier directement cas de non-éléments existants.

Vous peut lier un événement à certains parents qui n'existe pas, et dites-lui de vérifier c'est les enfants:
```
$(document).ready(function(){
    $(document).on('eventName', '#nonExistingElement', function(){ alert(1); }
    //or:
    $('#existingParent').on('eventName', '#nonExistingElement', function(){ alert(1); }
});
```
Toujours essayer de se rapprocher de l'élément déclencheur que vous le pouvez, cela permettra d'éviter unnessesary en train d'éclore dans les DOM

Si vous avez un peu bizarre fonctions de passe, vous pourriez faire quelque chose comme ceci:
```
function bindAllDocReadyThings(){
    $('#nonExistingElement').off().on('eventName', function(){ alert(1); }
    //Note the .off() this time, it removes all other events to set them again
}
$(document).ready(function(){
    bindAllDocReadyThings();
});
$.ajaxComplete(function(){
    bindAllDocReadyThings();
});
```
- Cela ne fonctionne pas sans erreurs, si vous n'avez pas les fonctions sur toutes les pages chargées. Par conséquent, je suggère d'ajouter quelque chose comme $(document).ajaxStart(function() { delete window.bindAllDocReadyThings; }); et plutôt de définir les fonctions dans les documents que bindAllDocReadyThings = function () { ... }
InformationsquelleAutor Martijn
5

essayez ceci, qui n'est pas de travail parce que votre commande n'est pas encore créé et que vous essayez de joindre un événement, si vous utilisez sur les cas, il fonctionnera très bien. laissez-moi savoir si vous rencontrez des problèmes.
```
$(document).ready(function(){
    $(document).on('click', '#element', function (evt) {
        alert($(this).val());
    });
});
```
InformationsquelleAutor Rudresha Parameshappa

Ici, la réponse est un délégué de l'événement:

JSFiddle

JSFiddle - Vraiment dynamique

jQuery

$(document).ready(function(){
    //Listen for a button within .container to get clicked because .container is not dynamic
    $('.container').on('click', 'input[type="button"]', function(){
        alert($(this).val());
    });

    //we bound the click listener to .container child elements so any buttons inside of it get noticed
    $('.container').append('<input type="button" class="dynamically_added" value="button2">');
    $('.container').append('<input type="button" class="dynamically_added" value="button3">');
    $('.container').append('<input type="button" class="dynamically_added" value="button4">');
    $('.container').append('<input type="button" class="dynamically_added" value="button5">');
});

HTML

<div class="container">
    <input type="button" class="dynamically_added" value="button1">
</div>

InformationsquelleAutor MonkeyZeus

0

Je suis en train de travailler sur une base de code avec un ami qui a une exigence semblable. Le délégué du gestionnaire d'événement option est nettement meilleur si vous désirez vous joindre gestionnaires d'événements. Une alternative, surtout si vous avez besoin de faire d'autres DOM traitement dans votre $(document).ready fonction, est de mettre le code que vous voulez exécuter dans un élément script à la fin de votre code. En gros, au lieu de:
```
<script type="text/javascript">
  $(document).ready(function() {
    //Your code here
  });
</script>

```
Essayez d'utiliser le script et le reste de l'HTML, autour de sorte que vous avez:
```

<script type="text/javascript">
  //Your code here
</script>
```
Cela force le navigateur à ne traiter que votre code une fois qu'il a chargé chaque autre élément du DOM dans le chargement dynamique de code HTML. Bien sûr, cela signifie que vous devrez assurez-vous que le insérée HTML n'a pas non intentionnels de l'INTERFACE utilisateur conséquences en utilisant CSS/HTML au lieu de JS. Son un vieux Javascript truc des années écoulées. Comme un bonus, vous n'avez pas besoin de jQuery pour ce plus.

Je dois mentionner que, dans le Chrome v34, d'en mettre un deuxième $(document).ready appel à l'intérieur d'un <script> dans la balise chargé dynamiquement HTML semble attendre pour charger dynamiquement des DOM à charger, puis exécute la fonction que vous l'avez décrit. Je ne suis pas sûr que ce comportement est standard, même si, comme il m'a causé un grand chagrin lorsque vous essayez d'automatiser des tests avec ce genre de code.

InformationsquelleAutor jeteon
0

AJAX de JQuery .load() est une fonction intégrée pour gérer cela.
Au lieu de simplement $('div#content').load('such_a_such.url'); vous devez inclure une fonction de rappel. JQuery .load() fournit la place pour la suite:
```
$('div#content').load('such_a_such.url',
    { data1: "First Data Parameter",
      data2: 2,
      data3: "etc" },
    function(){ $('#span1').text("This function is the equivalent of");
                $('#span2').text("the $(document).ready function.");
    }
 );
```
Cependant, vous n'avez pas besoin d'inclure les données de l'argument.

$( "#resultat" ).load( "ajax/test.html", function() {
alert( "Charge a été effectuée." );
});

http://api.jquery.com/load/

InformationsquelleAutor RoboticRenaissance

Vous devez vous connecter pour publier un commentaire.