2011-04-08 3 views
2

je suis en utilisant le code:Aide commutation de .live() à .delegate() jQuery

$('#stream').delegate('.load','click',function(){ 


//DO ACTIONS HERE 

}); 

mais lorsque le contenu est mis à jour avec un appel ajax, le script ne fonctionne plus, je servais à l'origine .live() mais je préférerais utiliser délégué, une idée sur hwo je peux résoudre ce problème?

EDIT

<html> 

<div id="stream"> 


<a href="example.html" class="load">example</a> 

<a href="example.html" class="load">example</a> 

<a href="example.html" class="load">example</a> 

<div class="load-more">load more links</div> 

</div> 


$('.load-more').click(function(){ 

$.ajax({ 
url: 'load.php', 
type: 'GET', 
cache: false, 
success: function(data) { 
     $('.load-more').before(data); 
         } 
}); 
return false; 
}); 
+0

pouvez-vous envoyer un échantillon de ce que le 'data' de l'appel ajax est? –

+0

Votre '$ ('. Load-more'). Click (function() {' devrait être '$ ('. Load'). Click (function() {' – stealthyninja

Répondre

2

Si le gestionnaire d'événements ne fonctionne qu'une fois, alors il est probable que l'appel Ajax est en remplacant élément référencé par $ (« stream n »), qui comprend tous les écouteurs d'événement à cet élément.

Si vous devez remplacer cet élément, attachez l'écouteur $ .delegate à l'élément parent de $ ('# stream'). Sinon, assurez-vous de ne remplacer que le contenu de $ ('# stream'), plutôt que l'élément entier.

Modifier

Il n'y a rien de mal avec les exemples de code que vous avez fournis; ils devraient travailler. Êtes-vous sûr que les liens créés par votre appel Ajax ont tous l'attribut de classe correct?

+0

bien, j'ai essayé d'attacher .deleagate au corps, mais pas de chance, et l'appel ajax ne devrait pas être, l'appel ajax ajoute seulement à # stream, ne pas le remplacer, mais laissez-moi jeter un coup d'oeil ici et assurez-vous – mcbeav

+0

Pouvez-vous poster l'appel Ajax avec votre question –

+0

yep une seconde, je vais modifier la question – mcbeav

1

@mcbeav: Essayez -

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 
<head> 
    <title>questions/5596529</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.load').click(function(e) { 
       $.ajax({ 
        url: 'load.php', 
        type: 'GET', 
        cache: false, 
        success: function(data) { 
         $('.load-more').before(data); 
        } 
       }); 

       e.preventDefault(); 
      }); 
     }); 
    </script> 
</head> 

<body> 

<div id="stream"> 
    <a href="#" class="load">example</a><br> 
    <a href="#" class="load">example</a><br> 
    <a href="#" class="load">example</a><br> 
    <div class="load-more">load more links</div> 
</div> 

</body> 
</html> 


PHP (juste pour les besoins de ce test)

<?php 

echo '<a href="#">More links..! '; 

?> 



Mise à jour
Pour répondre à votre question initiale de l'utilisation .delegate(), vous pouvez mettre à jour le code JavaScript dans le code HTML ci-dessus pour:

$(document).ready(function() { 
    $('body').delegate('.load', 'click', function(e) { 
     $.ajax({ 
      url: 'load.php', 
      type: 'GET', 
      cache: false, 
      success: function(data) { 
       $('.load-more').before(data); 
      } 
     }); 

     e.preventDefault(); 
    }); 
}); 
+1

merci pour toute l'aide! j'apprécie vraiment everythign! – mcbeav