.cliquez() événement à ne pas exécuter

Question

http://jsfiddle.net/M6xdq/

Ce que je veux réaliser, est - lorsque l'utilisateur clique sur le « lire la suite » link:

1. il est retiré
2. change lui étiquette de « lire less "
3. ce nouveau lien" lire moins "est ajouté à l'élément suivant de son parent (readmore_holder)
4. " readmore_holder "est affiché;

il devrait y avoir d'autre part avec « moins lire » d'échanger des liens de retour et de se cacher readmore_holder, mais comme je ne peux pas même le alert() pour montrer, je suis un peu perdu.

Quel est le problème ici?

P.S. S'il existe des moyens de simplifier cet extrait, je l'apprécierais vraiment.

Merci d'avance!

EDIT: Code de l'exemple jsFiddle.

$('.readmore_holder').hide(); 
$('.readmore_holder').prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>'); 

$('.toggleon').click(function() {  
    $(this).parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>'); 
    $(this).parent().next().fadeIn();   
    $(this).remove();   
}); 

$('.toggleoff').click(function() { 
    alert('works!'); 
});​ 

HTML

<p>Headline is right here</p> 
<p class="readmore_holder">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget suscipit ante. Pellentesque egestas varius dolor, sit amet blandit erat luctus quis. Nunc semper odio a orci vulputate ut pulvinar mi consequat. Praesent molestie accumsan velit, nec vehicula velit mattis vitae. Proin libero mauris, ultrices eu congue quis, sollicitudin et eros. Phasellus tortor mauris, imperdiet in euismod ut, tempor id ante.</p>​ 

Answer 1

Vous devez utiliser la méthode live() pour le contenu généré dynamique. See the working demo here

Answer 2

Cela ne fonctionne pas car les éléments toggleoff n'existent pas encore lorsque vous essayez de lier l'événement click.

Créer les éléments toggleoff dès le début:

$('.readmore_holder').hide(); 
$('.readmore_holder').prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>'); 
$('.toggleon').parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>'); 

$('.toggleon').click(function() {  
    $(this).parent().next().fadeIn();   
    $(this).hide();   
}); 

$('.toggleoff').click(function() { 
    alert('works!'); 
}); 

J'ai aussi changé remove à hide pour se débarrasser du lien read-more. De cette façon, vous pouvez simplement le montrer lorsque vous cachez le texte au lieu de le recréer.

Answer 3

Erreur très simple: lorsque vous avez attribué le gestionnaire de clic pour "lire moins", il n'existait pas encore et n'a donc pas été affecté. Déplacez simplement l'affectation dans le gestionnaire de clic.

Pour nettoyer un peu le code, un coup d'oeil:

$('.readmore_holder').hide().prev().append(' <a href="javascript:void(0);" class="toggleon">read-more</a>'); 

$('.toggleon').click(function() 
{  
    $(this).parent().next().fadeIn();   

    $(this).parent().next().append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>').click(function() { 
     alert('works!'); 
    }); 
    $(this).remove(); 
}); 

Answer 4

Voici mon conseil. Ne supprimez pas le lien. Il suffit de changer le texte et de modifier le code pour gérer les deux situations.

Ce sera beaucoup plus efficace.

Exemple:http://jsfiddle.net/M6xdq/14/

$('.readmore_holder').hide() 

    .prev().append(' <a href="javascript:void(0);" class="toggle">read-more</a>') 

    .find('.toggle').click(function() { 
     $(this).text(function(i,txt) { 
      var more = (txt === 'read-more'); 
      if(more) 
       $(this).parent().next().append(this).fadeIn(); 
      else 
       $(this).parent().fadeOut().prev().append(this); 
      return (more) ? 'read-less' : 'read-more'; 
     });  
    });​ 

Ou celui-ci où les deux liens sont de créer et .show() et .hide() sont utilisés. L'une ou l'autre solution serait préférable à la destruction et à la création du même élément.

Exemple:http://jsfiddle.net/M6xdq/15/

$('.readmore_holder').hide() 
     .append(' <a href="javascript:void(0);" class="toggleoff">read-less</a>') 
     .find('.toggleoff') 
     .click(function() { 
      $(this).hide().parent().fadeOut().prev().find('.toggleon').show(); 
     }) 

     .parent().prev() 
     .append(' <a href="javascript:void(0);" class="toggleon">read-more</a>') 
     .find('.toggleon') 
     .click(function() { 
      $(this).hide().parent().next().fadeIn().find('.toggleoff').show(); 
     });​ 

Answer 5

Peut-être que vous pouvez essayer le faire de manière différente. La fonction jQuery .toggle() peut prendre 2 (ou même 3) gestionnaires de fonction comme arguments. Après le premier clic, la première fonction est appelée, et après le deuxième clic, la deuxième fonction est appelée. Donc, vous pourriez faire quelque chose comme:

<style> 
.readmore_holder { display: none; } 
</style> 
... 
<p>head line</p> 
<p class="readmore_holder">some text</p> 
<a href="javascript:void(0)" class="toggle">read more</a> 

<script type="text/javascript"> 
$("a.toggle").toggle(function(){ 
    $(this).html("hide"); 
    $(this).prev("p").show(); //for better effect you can use slideDown() here 
}, function(){ 
    $(this).html("read more"); 
    $(this).prev("p").hide(); //for better effect you can use slideUp() here 
}); 
</script>