2

私のhtmlページでは、いくつかのオプションを選択しています。
オプションを選択すると、オプションの値を php スクリプトに渡して ajax 呼び出しが発生し、ページに追加された特定の ID を持つ html フラグメント (別の選択) が返されます。

ユーザーが最初の選択から別のオプションを選択すると、イベントが再び発生し、ajax 呼び出しが実行され、別の HTML フラグメント (同じ ID を持つ) がページに追加されます。

イベントが2回目に発生した場合、新しい要素を追加する前に、追加された要素がページから削除されるようにします。

現時点では、私はこのコードを使用しています:

$(document).ready(function() {
    $("#id_serie").change(function() { //#id_serie is the if of the first select
        if ($("#id_subserie_label")) { //#id_subserie_label is the id of the html element returned by the ajax call
            console.log("Removing");
            $("#id_subserie_label").empty().remove();
        }
        var url = 'myscript.php';
        var id_s = $(this).val();
        $.post(url, {id_serie: id_s}, function(data) {
            $("#id_serie").parent().after(data);
        });
    });
});

ただし、これは機能しません。2 番目の ajax 呼び出しによって返された html 要素は、最初の呼び出しから返された要素の後に追加されます (スクリプトが読み込まれたときに、ID #id_subserie_label を持つ要素がページにないため?)。

どうすれば必要なものを達成できますか?

4

1 に答える 1

2

あなたはとても近くにいます。

に変更if ($("#id_subserie_label"))するだけif ($("#id_subserie_label").length)です：

$(document).ready(function() {
    $("#id_serie").change(function() {
        if ($("#id_subserie_label").length) { // <=== change this line
            console.log("Removing");
            $("#id_subserie_label").empty().remove();
        }
        var url = 'myscript.php';
        var id_s = $(this).val();
        $.post(url, {id_serie: id_s}, function(data) {
            $("#id_serie").parent().after(data);
        });
    });
});

jQuery FAQ: 要素が存在するかどうかをテストするにはどうすればよいですか?を参照してください。.

これは、Ivoが指摘するように、次のような理由によるものです。

$("#id_subserie_label")はオブジェクトであり、オブジェクトは常に true と評価されます。

Andy E のコメントに従って、console.log()呼び出しが必要ない場合は、コードをこれに単純化できます。

$(document).ready(function() {
    $("#id_serie").change(function() {
        $("#id_subserie_label").empty().remove();
        var url = 'myscript.php';
        var id_s = $(this).val();
        $.post(url, {id_serie: id_s}, function(data) {
            $("#id_serie").parent().after(data);
        });
    });
});
于 2011-01-17T16:02:19.620 に答える