jQuery ne fonctionne pas dans la page AJAX Loaded

StackOverflow https://stackoverflow.com/questions/1419433

Question

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

<!-- 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 le suivant 

$(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 grosse erreur de temps?

Était-ce utile?

La solution

On dirait que vous avez besoin 

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

$ .fn.live, car les gestionnaires d’événements ne sont enregistrés que lors de la création initiale du dom, et que vous repeupliez le DOM et que ceux-ci ne sont pas attachés.

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

Autres conseils

Si je lis ce droit, vous ajoutez les gestionnaires de clics au début. Ceux-ci n'affectent que les boutons actuels. Vous devrez peut-être simplement changer cela en événement Live. 

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

sur le travail d'événement pour le dom actuel de votre page et tout dom chargé par ajax à l'avenir

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top