jQuery no funciona en la página cargada de AJAX

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

Pregunta

Estoy usando jQuery para cargar una página de AJAX usando $ .ajax (supongamos test.html).
Es un documento HTML simple con algunos botones y animaciones asociadas al hacer clic en ellos (también usando jQuery).
Las propiedades .click () asociadas funcionan bien cuando cargo la página directamente, pero los botones no responden cuando hago clic en ellas en la versión cargada de AJAX.
Dado que estoy demasiado cansado para explicar todo lo sombrío que soy haciendo, simplemente estoy escribiendo todo el código a continuación, disculpas por esto. Aquí están los códigos requeridos en los archivos. 

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

y el siguiente 

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

y el último 

<!-- 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 no cometer un gran error?

¿Fue útil?

Solución

Suena como si lo necesitaras 

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

$ .fn.live, ya que los controladores de eventos solo se registran en la creación inicial del dom, y está repoblando el DOM y no están adjuntos.

Más información @ http://docs.jquery.com/Events/live

Otros consejos

Si estoy leyendo ese derecho, está agregando los controladores de clic al principio. Estos solo afectan a los botones actuales. Es posible que solo necesite cambiar eso a un evento en vivo. 

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

sobre el trabajo de eventos para el dom actual en su página y cualquier dom cargado por ajax en el futuro

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top