1

現在、jQuery で最初のステップを実行していて、.remove(). 同様の問題を抱えている人からすでに多くの質問がありますが、私には役に立ちません。

HTML ファイルには、フォームと、divアラート ボックスとして機能し、フォームが正しく検証されたかどうかを表示する次のものがあります。元の状態では、divには閉じるためのボタンが 1 つ含まれています。

<div id="my-form-alert-box">
    <button id="my-form-alert-button" type="button" class="close">x</button>
</div>

HTML ページが初めてロードされるとき、警告ボックスは表示されません。そのため、次の CSS を追加します。

<style type="text/css">
    #my-form-alert-box {display: none;}
</style>

フォームが送信されて検証されると、これに追加<p>some text</p>しdiv、警告ボックスが表示されます。ボタンを使用してアラート ボックスを閉じると、アラート ボックスは消えますが、<p>some text</p>削除されません。これはなぜですか？

ここに私のjQueryコードがあります:

$(document).ready(function() {

    var $myFormAlertBox = $('#my-form-alert-box');
    var $myFormAlertBoxParagraph = $('#my-form-alert-box p');

    $('#my-form-alert-button').on('click', function(event) {

        $myFormAlertBoxParagraph.remove();
        $myFormAlertBox.hide();

    });

    $('#my-form').on('submit', function(event) {

        $.ajax({
            // ...
            success: function(data) {

                // The content of the alert box should be removed
                // and the alert box itself should be hidden also when
                // the form gets submitted again and not only when the
                // button is clicked
                $myFormAlertBoxParagraph.remove();
                $myFormAlertBox.hide();

                // data contains <p>some text</p>
                $myFormAlertBox.append(data).show(); 
            }

        });

        event.preventDefault();

    });        

});

データの追加は正常に機能しますが、削除は機能しません。手伝って頂けますか？どうもありがとうございました！

4

3 に答える 3

2

コンテンツを更新する前に、セレクターが実行されていると思います。セレクターは、最初に実行されたときにそこにあるものだけを見ることができます。

于 2012-11-21T20:36:01.067 に答える
1

jQueryオブジェクトはライブではありません。を追加する前に、$myFormAlertBoxParagraphオブジェクトを作成します<p>。したがって、このオブジェクトは空であり、再割り当てすることはないため、「永久に」空になります。

于 2012-11-21T20:35:54.883 に答える
1

$ myFormAlertBoxParagraphの最初の割り当ては、呼び出されたときにマークアップに段落がないため失敗します。マークアップに「プレースホルダー」段落を追加すると、修正されるはずです。これは、.remove（）が失敗する理由を説明しています。

ajaxの場合は、次のような方法を試して、変数に新しい値を割り当てたままにします。

//...
$.ajax({
    // ...
    success: function(data) {
        // Remove the existing paragraph.
        $myFormAlertBoxParagraph.remove();

        // This updates the paragraph object with the new one.
        $myFormAlertBoxParagraph = $(data);

        // Add the new paragraph and ensure the alert box is visible.
        $myFormAlertBox.append($myFormAlertBoxParagraph).show();
    }
});
//...

これにより、アラートボックスから段落タグが削除され、新しいタグが追加されます。.hide（）して、すぐに.show（）する必要はありません。ただし、.append（）の後に.show（）を追加すると、クリックイベントによって非表示になっている場合にカバーされます。

于 2012-11-21T20:25:54.470 に答える