2

私のHTMLは次のとおりです。データベースからプルしてwhileループを使用しているため、これには複数のインスタンスがあります。

<div class="container">
    <div class="some_stuff">content1</div>
    <div class="more_stuff">content2</div>
    <div class="delete">
        <a href="#" id="itemID" class="deleteContainer">Delete</a>
    </div>
</div>

jQuery:

$(function() {
$(".deleteContainer").click(function() {
    var container=$(this).closest("div.container");
    var containerid = $(this).attr("id");

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: "id=" + containerid,
        cache: false,
        success: function() {
            container.slideUp(500, function() {$(this).remove();});
        }
    });
return false;
});
});

各コンテナ内の「削除」リンクにより、適切なフィールドがデータベースから削除され、成功すると、適切なコンテナがスライドして削除されるという考え方です。delete.php正常に動作し、アニメーション効果はほとんど機能しています。私が抱えている問題は、slideUpがスライドせず、代わりに 2 つの部分で発生することです。最初に、下部の余白のように見えるものが<div class="container">即座に消え (スライド効果はありません)、次に約 4 分の 1 秒後に残りが消えます。が<div class="container">消えます。データベース呼び出しは正常に機能します。適切なコンテンツが削除され、その後のアクセスでページが正しくレンダリングされます。アニメーションで何が起こっているのかわかりません (Safari、Opera、Chrome、および Firefox でテスト済み)。

サーバー応答の遅延など、AJAX の問題であるかどうかをテストする際に、次のことを試しました。

$(window).load(function(){
    $(".container").click(function(){
        $(this).slideToggle(500);
    });
});

それにはまだバラバラに発生するという同じ問題があるslideUp()ので、これは jQuery と HTML 構造 (おそらくネストされた<div>s?) に関係していると思います。slideUp()同じページの他のシナリオは正常に機能します。

4

0 に答える 0