jQuery non funziona nella pagina caricata di AJAX

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

Domanda

Sto usando jQuery per caricare una pagina di AJAX usando $ .ajax (supponiamo test.html). È un semplice documento HTML con alcuni pulsanti e animazioni associate quando si fa clic su di essi (anche usando jQuery).
Le proprietà .click () associate funzionano correttamente quando carico la pagina direttamente, ma i pulsanti non rispondono quando faccio clic nella versione caricata AJAX.
Dato che sono troppo stanco per spiegare effettivamente tutto ciò che sono facendo, sto semplicemente scrivendo tutto il codice qui sotto, mi scuso per questo. Ecco i codici richiesti nei file. 

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

e il prossimo 

$(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();
        }
    });
});

e l'ultimo 

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

Spero di non commettere un grosso errore?

È stato utile?

Soluzione

Sembra che tu abbia bisogno 

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

$ .fn.live, poiché i gestori di eventi sono registrati solo alla creazione iniziale di dom e stai ripopolando il DOM e quelli non sono collegati.

Ulteriori informazioni @ http://docs.jquery.com/Events/live

Altri suggerimenti

Se sto leggendo bene, stai aggiungendo i gestori dei clic all'inizio. Questi riguardano solo i pulsanti correnti. Potrebbe essere necessario solo cambiarlo in un evento dal vivo. 

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

sul lavoro dell'evento per il dom corrente nella tua pagina e qualsiasi dom caricato da Ajax in futuro

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top