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元素在空（）后重新出现

回答

相关问题