jQuery no funciona en la página AJAX cargada

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

<!-- 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 que no estoy haciendo alguna gran error de tiempo?

Fuente

2009-09-14 OrangeRind

Suena como que necesita

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

$ .fn.live, como controladores de eventos solamente se registran en la creación inicial dom, y que está repoblando el DOM y los que no se adjuntan.

Más info @http://docs.jquery.com/Events/live

Fuente

2009-09-14 02:23:31

aún no funciona :( – OrangeRind

Se puede actualizar la descripción con su código actualizado, o pegar un enlace en vivo? Y recordó reemplazar * todas * .click asignaciones de controlador de eventos que deben volverse a aplicar con $ ('selector'). Live ('clic', función() {});? –

Sí, funciona ahora! Gracias! la primera vez que lo reemplacé solo en el botón de ir, pero ahora lo hice para todos. ¿Cuál es exactamente la diferencia entre .click y .live()? ¿significa esto que puedo usar .live siempre en lugar de hacer clic? – OrangeRind

si estoy leyendo ese derecho va a agregar los controladores haga clic al principio. Estos solo afectan los botones actuales. Es posible que solo deba cambiar eso a un evento en vivo.

Fuente

2009-09-14 02:24:03

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

en el trabajo evento para Dom actual en su página y cualquier dom cargado de ajax en el futuro

Fuente

2012-08-31 09:10:14

jQuery no funciona en la página AJAX cargada

Respuesta

Cuestiones relacionadas