jQuery的錯誤 - 開啓/關閉鏈接

Question

我有充當開關開/關按鈕的鏈接文字，我想使用它沒有任何頁面重載。 關閉時，鏈接具有與開啓狀態不同的特定類別，網址和文本值。 （即開啓它出現綠色/關閉它顯示爲紅色）

略低於你有我使用的那一刻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. 刪除兩個點擊函數中的重複代碼，並將它們統一在一起。