2

在我的 html 页面中，我有一个带有一些选项的选择。
选择选项时，将选项的值传递给PHP脚本的Ajax调用，该脚本返回一个具有附加到页面的某个ID的HTML片段（另一个选择）。

当用户从第一个选择中选择另一个选项时，再次触发事件，执行 ajax 调用并将另一个 html 片段（具有相同的 id）附加到页面。

我希望，如果该事件被第二次触发，附加的元素会在附加新元素之前从页面中删除。

目前我正在使用这段代码：

$(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);
        });
    });
});

但这不起作用，第二个 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 常见问题解答：如何测试元素是否存在？.

这是因为，正如Ivo指出的那样：

$("#id_subserie_label")是一个对象，并且对象总是评估为真。

根据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 回答