Ссылки не нажимаются после изменения текста с помощью jQuery

Question

В Joomla я переключаюсь между языками, не используя флаги стран в качестве индикатора того, на каком языке я работаю, но переключаю текст с английского на африкаанс, используя метод replaceWith () jQuery.что при первом нажатии слова «английский», чтобы изменить его на африкаанс, ссылка не работает.Тем не менее, он работает на тумблер, когда он должен вернуться.

Буду признателен за помощь, пожалуйста.Вот моя логика того, как я думаю, что это должно работать:

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

Это потому, что обработчик событий не остается неизменным. Вы можете использовать live в качестве альтернативы, но лучшим способом будет изменение href и текста.

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')
  }
);

Или используйте $(this).html('HTML HERE') вместо.

Answer 2

Вы заменяете элемент, имеющий обработчик click (.toggle() - это обработчик click, и вы в настоящее время его теряете), но вам действительно нужно изменить ссылка внутри , используя .html(), например:

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>");
    }
  );
});