DOM元素在空（）後重新出現

我有一個按鈕，當第一次點擊時它會加載另一個html頁面。第二次點擊時，它將清空加載頁面的div。DOM元素在空（）後重新出現

然而，由於某些原因，加載的內容保持第二次點擊後重現....

CSS：

#boatdiv { 
    width: 100%;  
} 

.clicked {}

HTML

<button id="load"></button> 
<div id="boatdiv"></div>

jQuery的

$(document).ready(function() { 
    $.ajaxSetup ({ 
     cache: false 
    }); 
    var loadURL = "AjaxLoad_injection.html"; 
    $("#load").on("click", function() { 
     if(!($(this).hasClass("clicked"))){ //checks if button has NOT been clicked 
     $("#boatdiv").html("<p>loading...</p>").load(loadURL); 
     } 
     else { 
     $("#boatdiv").empty(); 
     } 
     $("#boatdiv").toggleClass("clicked"); 
     } 
    ); 


}); // end ready

發生了什麼事？

來源

2013-02-06 LazerSharks

您測試$(#load)但切換$("boatdiv")。

嘗試：

$("#load").on("click", function() { 
    if(!($(this).hasClass("clicked"))){ //checks if button has NOT been clicked 
     $("#boatdiv").html("<p>loading...</p>").load(loadURL); 
    } 
    else { 
     $("#boatdiv").empty(); 
    } 
    $(this).toggleClass("clicked"); 
});

來源

2013-02-06 03:57:02

ahhhhh。是！那就是問題所在。謝謝:) – LazerSharks

你是錯的元素上觸發類。你想讓它切換被點擊的元素。與我在上一篇文章中給出的代碼相同。

簡單穿起來走路，你正在測試this ......所以需要toglle上this

使用

$(this).togglClass('clicked')

來源

2013-02-06 03:58:05 charlietfl

啊，是啊....我注意到我應該剛剛複製你的代碼。謝謝:) – LazerSharks

類記住，Ajax調用是異步的。在ajax調用返回之前，您可能再次點擊該按鈕。

Ajax調用過程中你可以禁用按鈕，如下所示：

$('#load').on('click', function() { 
    if (!$(this).hasClass("clicked")) { 
     $('#load').attr('disabled', true); 
     $("#boatdiv").html("<p>loading...</p>").load(loadURL, function() { 
      $('#load').attr('disabled', false); 
     }); 
    } else { 
     $('#boatdiv').empty(); 
    } 
    //$('#boatdiv').toggleClass("clicked"); 
    $('#load').toggleClass("clicked"); 
});

按鈕在AJAX調用之前禁用。回調函數作爲第二個參數傳遞給「load（）」函數。它會在ajax調用返回時被調用。它將重新啓用按鈕。

編輯：我錯過了錯誤的元素得到類切換，但我仍然認爲你想在ajax調用期間禁用按鈕或事情可以搞砸了。

來源

2013-02-06 04:05:47

是的，這是有幫助的。感謝你！ – LazerSharks

DOM元素在空（）後重新出現

回答

相關問題