0

我有一个按钮，当第一次单击它时，它将加载另一个 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

这是怎么回事？

4

3 回答 3

2

您测试$(#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-06T03:57:02.523 回答
1

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

很容易通过它，你正在测试this......所以需要切换课程this

采用

$(this).togglClass('clicked')
于 2013-02-06T03:58:05.847 回答
1

请记住，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-06T04:05:47.513 回答