Ошибка JQuery - Включение/выключение ссылки

Question

У меня есть текст ссылки, который действует как кнопка включения/выключения, и я пытаюсь использовать его без перезагрузки страницы. Когда он выключен, ссылка имеет определенный класс, url и текстовое значение, отличное от включенного состояния. (т. е. включен он отображается зеленым/выключен, он кажется красным)

Немного ниже у вас есть код jquery, который я использую на данный момент.

$('.off').click(function() { 
    var element = $(this); 
    var link = $(this).attr('href'); 
    var newlink = link.replace('off','on'); 
    $.get(link, function(data) { 
    $('#front').html(data); 
    $('#front').center().show(); 
    $('#background').show(); 
    if(data == "Button switched.") { element.attr('href', newlink); element.text('on'); element.attr('class', 'on'); } 
    }); 
    return false; 
      }); 

$('.on').click(function() { 
    var element = $(this); 
    var link = $(this).attr('href'); 
    var newlink = link.replace('on','off'); 
    $.get(link, function(data) { 
    $('#front').html(data); 
    $('#front').center().show(); 
    $('#background').show(); 
    if(data == "Button switched off.") { element.attr('href', newlink); element.text('off'); element.attr('class', 'off'); } 
    }); 
    return false; 

      }); 

и HTML элемент Я говорю о том, как это выглядит:
<a href="engine.php?id=15&amp;switch=on" class="on">on</a>

Таким образом, если элемент, который выглядит точно так же, как и выше в настоящее время нажатия, кнопка переключаясь отключена и все атрибуты ссылок изменяются, но когда я нажимаю второй раз (по ссылке с новыми атрибутами), он делает запрос ajax, и он дает мне результат в #front, но он не изменит атрибуты ссылки снова, как и должно быть.

В чем проблема?

Answer 1

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

$(document).on('click', '.off', function() { 
    var element = $(this); 
    var link = $(this).attr('href'); 
    var newlink = link.replace('off','on'); 
    $.get(link, function(data) { 
    $('#front').html(data); 
    $('#front').center().show(); 
    $('#background').show(); 
    if(data == "Button switched.") { element.attr('href', newlink); element.text('on'); element.attr('class', 'on'); } 
    }); 
    return false; 
      }); 

$(document).on('click', '.on', function() { 
    var element = $(this); 
    var link = $(this).attr('href'); 
    var newlink = link.replace('on','off'); 
    $.get(link, function(data) { 
    $('#front').html(data); 
    $('#front').center().show(); 
    $('#background').show(); 
    if(data == "Button switched off.") { element.attr('href', newlink); element.text('off'); element.attr('class', 'off'); } 
    }); 
    return false; 

    }); 

Кстати старайтесь не использовать document, вместо того, чтобы использовать селектор любого контейнера, который существует в DOM в любой момент времени. т.е. $('.somContainerSelector').on('click', '.off', function() {..

Вы можете попытаться упростить от необходимости дублировать код в 2 обработчиков для одного обработчика $(document).on('click', '.on, .off', function() { как разница все о тексте on и off.

Answer 2

Когда вы $('.off').click(function() {... обработчик нажмите прилагается ко всем .off элемент, который существует в то время код выполняется. Когда этот код исполняется, нет элементов .off.

Возможно, вы должны использовать только один обработчик click, а затем иметь некоторую логику, чтобы определить, в каком состоянии он находится сейчас, или сохранить состояние в переменной.

Answer 3

Проблема в том, что даже если вы измените класс, он все еще имеет привязку off и никогда не получает привязки on.

Связывание с DOM готово. Так как ваш тег имеет только класс off, он не применяется и не будет вызывать триггер.

Использование .on() связывания так:

$(document).on('click', '.off', function(){...}) 
$(document).on('click', '.on', function(){...}) 
//Document should be a selector of the closest non-dynamic parent. 

и он будет работать.

Кроме того, так как код почти то же самое, вы можете обернуть его в 1 функции:

$('.off').click(function() { 
    var element = $(this); 
    var link = element.attr('href'); 
    var isOff = element.hasClass('off') 
    var newlink = isOff ? link.replace('off','on') : link.replace('on','of') 
    $.get(link, function(data) { 
     $('#front').html(data); 
     $('#front').center().show(); 
     $('#background').show(); 
     if(data == "Button switched.") { 
      element.attr('href', newlink); 
      element.text(isOff ? 'on' : 'off'); 
      element.toggleClass('on off'); 
     } 
    }); 
    return false; 
}); 

Answer 4

Попробовать и посмотреть, если это работает

$(document).on('click', '.on, .off', function() { 
     var element = $(this); 
     var link = $(this).attr('href'); 
     var newlink = link.replace('on','off'); 

     $.get(link, function(data) { 
      $('#front').html(data).center().show(); 
      $('#background').show(); 
       if(data == "Button switched off.") { element.attr('href', newlink); element.text('off'); element.removeClass('on').addClass('off'); } 
       else if(data == "Button switched.") { element.attr('href', newlink); element.text('on'); element.removeClass('off').addClass('on'); } 
     }); 

     return false; 

    }); 

Answer 5

Дайте этот код попробовать. Замените две функции щелчка с этим единственным одним:

$(document).on('click', '.on, .off', function() { 
     var $element = $(this); 
     var newmode = $element.hasClass('on') ? "off" : "on"; 
     var link = $(this).attr('href'); 
     var newlink = (link.match('on')) ? link.replace('on','off') : link.replace('off', 'on'); 
     $.get(link, function (data) { 
       $('#front').html(data); 
       $('#front').center().show(); 
       $('#background').show(); 
       if (data == "Button switched" + ((newmode == "off") ? " off" : "") + ".") { 
        element.attr('href', newlink); 
        element.text(newmode); 
        element.removeClass('on off').addClass(newmode); 
       } 
      }); 
     return false; 
    }); 

Вот что это выполняет:

1. Изменение функции щелчка на функцию $ .он(). Я думаю, что переключение класса назад и вперед привело к тому, что функция $ .click() потеряла привязку к элементу. $ .on() должен помешать этому
2. Удаляет дублированный код, который у вас был в обеих функциях щелчка, и объединяет все вместе.