Question

我有一个按钮，当它第一次点击时会加载另一个html页面。第二次单击时，它将清空已加载页面的div。

但是，出于某种原因，加载的内容会在第二次点击后重新出现....

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

发生了什么事？

Answer 1

您测试$(#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");
});

Answer 2

你正在错误的元素上切换类。您希望它在要单击的元素上切换。与我在上一篇文章中给你的代码相同。

简单地浏览它，您正在测试this ...所以需要在this

上讨论课程

使用

$(this).togglClass('clicked')

Answer 3

请记住，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调用期间禁用按钮或者事情可能搞砸了。

调用empty（）后重新出现DOM元素

3 个答案: