Liens non cliquables après un changement de texte avec jQuery

Question

Dans Joomla, je change de langue sans utiliser les drapeaux de pays comme indicateur de langue mais je passe le texte de l'anglais à l'afrikaans en utilisant la méthode replaceWith() de jQuery.

Problème que je rencontre est que sur le premier clic du mot anglais, pour le changer en afrikaans, le lien ne fonctionne pas. Il fonctionne cependant sur la bascule quand il doit revenir.

Apprécierait l'aide s'il vous plaît. Voici ma logique de la façon dont je pense que cela devrait fonctionner:

jQuery(document).ready(function($) { 
$(".item48").toggle(
    function() { 
    $(this).replaceWith("<li class='active item48' id='current'><a href='index.php?lang=af'><span>English</span></a></li>"); 
    }, 
    function() { 
    $(this).replaceWith("<li class='active item48' id='current'><a href='index.php?lang=en'><span>Afrikaans</span></a></li>"); 
    } 
); 

Answer 1

Vous remplacez l'élément qui a le gestionnaire click (.toggle() est un gestionnaire click, et vous êtes en train de perdre), mais vous avez vraiment besoin changer le lien intérieur, en utilisant .html() comme ceci:

jQuery(document).ready(function($) { 
    $(".item48").toggle(
    function() { 
     $(this).html("<a href='index.php?lang=af'><span>English</span></a>"); 
    }, 
    function() { 
     $(this).html("<a href='index.php?lang=en'><span>Afrikaans</span></a>"); 
    } 
); 
}); 

Answer 2

C'est parce que le gestionnaire d'événements ne reste pas intact. Vous pouvez utiliser live comme alternative, mais la meilleure méthode serait de changer le href et le texte.

jQuery(document).ready(function($) { 
$(".item48").toggle(
    function() { 
    $('a', this).attr('href', 'index.php?lang=en').find('span').text('English') 
    }, 
    function() {   
    $('a', this).attr('href', 'index.php?lang=af').find('span').text('Afrikaans') 
    } 
); 

Ou utilisez $(this).html('HTML HERE') à la place.