jQuery não funciona no página Loaded AJAX

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

Pergunta

Eu estou usando jQuery para carregar uma página por AJAX usando $ .ajax (test.html suponho).
É um documento HTML simples com alguns botões e animações associadas ao clicar-los (também usando jQuery).
o .Clique () propriedades associadas estão funcionando bem quando eu carregar a página diretamente, mas os botões não respondem quando eu clico-los no AJAX carregado versão.
Desde que eu sou também pneus para realmente explicar toda a triste que eu sou fazendo, estou simplesmente escrevendo todo o código abaixo, desculpas por isso. Aqui estão os códigos necessários nos arquivos. 

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

eo próximo 

$(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 a última 

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

Espero que eu não estou fazendo algum grande erro tempo?

Foi útil?

Solução

Parece que você precisa 

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

$. Fn.live, como manipuladores de eventos apenas são registadas na criação dom inicial, e você está repovoar o DOM e os que não estão ligados.

Mais info @ http://docs.jquery.com/Events/live

Outras dicas

Se eu estou lendo esse direito você está adicionando os manipuladores clique no início. Estes afetam apenas botões atuais. Você pode só precisa mudar isso para um evento ao vivo. 

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

no trabalho evento para dom atual em sua página e qualquer dom carregado pelo ajax no futuro

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top