jQuery ne fonctionne pas dans AJAX Loaded page

J'utilise jQuery pour charger une page avec AJAX en utilisant $ .ajax (supposer test.html).
C'est un document HTML simple avec quelques boutons et animations associées en cliquant dessus (utilisant également jQuery).
Les propriétés .click() associées fonctionnent correctement lorsque je charge la page directement mais que les boutons ne répondent pas lorsque je les clique dans la version chargée d'AJAX.
Puisque je suis trop fatigué pour vraiment expliquer toute la morosité que je fais, je suis simplement en train d'écrire tout le code ci-dessous, des excuses pour cela. Voici les codes requis dans les fichiers.jQuery ne fonctionne pas dans AJAX Loaded page

<!-- p11.php --> 
<!DOCTYPE html"> 
<html> 
<head> 
    <title>jQuery</title> 
    <script type="text/javascript" src="c/js/jquery.js"></script> 
    <script type="text/javascript" src="c/js/jtry11.js"></script> 
    <link rel='stylesheet' type='text/css' href='c/css/css11.css'> 
</head> 
<body> 
    <button id="go1">Load Something Using AJAX</button> 
    <div id="msg"></div> 
    <div id="showButton"> 
     <button id="showLoadedPage">Show the Page</button> 
    </div> 
    <div id="results"></div> 
</body> 
</html>

et la prochaine

$(document).ready(function() 
{ 
    $('#results').hide(); 
    $('#msg').hide(); 
    $('#showButton').hide(); 
    $('#loading').hide(); 
    $('#loaded').hide(); 

    $('#load').live('click', function() 
    { 
     $('#load').hide(); 
     $('#loading').show(); 
     $('#msg').show('fast'); 
     $.ajax({ 
      url: 'test.html', 
      cache: false, 
      success: function(html) { 
        $('#results').append(html); 
      } 
     }); 
     $('#msg').ajaxSuccess(function(evt, request, settings){ 
      $(this).append('Click the Button Below to View the Page'); 
      $('#showButton').show('slow'); 
      $('#hideLoadedPage').hide(); 
      $('#loading').hide(); 
      $('#loaded').show(); 
     }); 
    }); 

    $('#showLoadedPage').live('click', function() { 
     $('#loaded').hide('slow'); 
     $('#msg').hide('slow'); 
     $('#results').show('fast'); 
     $('.shower').hide(); 
     $(this).hide(); 
     $('#hideLoadedPage').show(); 
    }); 

    $('#hideLoadedPage').live('click', function() { 
     $('#results').hide('fast'); 
     $('.shower').hide(); 
     $(this).hide(); 
     $('#showLoadedPage').show(); 
    }); 

    $('.hider').live('click', function() { 
     $('.shower').show(); 
     $(this).hide(); 
     $('p.one').hide('slow'); 
     $('p.two').hide('medium'); 
     $('p.three').hide('fast'); 
    }); 

    $('.shower').live('click', function() { 
     $('.hider').show(); 
     $(this).hide(); 
     $('p.one').show('slow'); 
     $('p.two').show('medium'); 
     $('p.three').show('fast'); 
    }); 

    $('p.*').live('click', function() { 
     $(this).hide('slow'); 
     if($('p').is(':hidden')) { 
      $('.shower').show(); 
     } 
     if($('p.*').is(':hidden')) { 
      $('.hider').show(); 
     } 
    }); 
});

et le dernier

<!-- test.html --> 
Page Loaded by Ajax. 
Not the original Page 

<center> 
    <button class="hider"> 
     <img src="c/images/zoom_out.png" alt="zoom_out" /> 
     Hide 'em 
    </button> 
    <button class="shower"> 
     <img src="c/images/zoom_in.png" alt="zoom_out" /> 
     Show it 
    </button> 
    <p class="one">Hiya</p> 
    <p class="two">Such interesting text, eh?</p> 
    <p class="three">The third Paragraph</p> 
</center>

J'espère que je ne fais pas une erreur de temps grand?

Source

2009-09-14 OrangeRind

On dirait que vous avez besoin

$('#go1').live('click', function() {});

.fn.live $, en tant que gestionnaires d'événements ne sont enregistrés que sur la création de dom initiale, et vous repeupler les DOM et ceux qui ne sont pas attachés.

Plus d'info @http://docs.jquery.com/Events/live

Source

2009-09-14 02:23:31

ne fonctionne toujours pas :( – OrangeRind

Pouvez-vous mettre à jour la description avec votre code mis à jour, ou collez un lien direct? Et vous vous souvenez de remplacer * toutes * les affectations de gestionnaire d'événements .click qui doivent être réappliquées avec $ ('selector'). Live ('click', function() {});? –

Oui ça marche maintenant! Merci! la première fois que je l'avais remplacé seulement dans le bouton aller, mais maintenant je l'ai fait pour tout.Quelle est exactement la différence entre .click et .live()? Est-ce que cela signifie que je peux utiliser .live toujours à la place du clic? – OrangeRind

Si je lis ce droit, vous ajoutez les gestionnaires de clic au début. Cela n'affecte que les boutons actuels. Vous devrez peut-être changer cela en un événement Live.

Source

2009-09-14 02:24:03

$("#peopleResult_list").on('click','a', function(event){ 
    //do you code here 
});

sur le travail d'événements pour dom en cours dans votre page et tout dom chargé par ajax à l'avenir

Source

2012-08-31 09:10:14

jQuery ne fonctionne pas dans AJAX Loaded page

Répondre

Questions connexes