0

初めてクリックしたときに別のhtmlページをロードするボタンがあります。2 回目にクリックすると、読み込まれたページの div が空になります。

しかし、何らかの理由で、ロードされたコンテンツが2回目のクリック後に再表示され続けます....

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()」関数の 2 番目のパラメーターとして渡されます。ajax 呼び出しが返されたときに呼び出されます。ボタンを再度有効にします。

編集:間違った要素がクラスを切り替えていたことを見逃しましたが、ajax 呼び出し中にボタンを無効にしたい場合、または物事が台無しになる可能性があると思います。

于 2013-02-06T04:05:47.513 に答える