javascript - jQuery 在 ajax 调用中选择附加元素不起作用

Question

在代码中，.moneychoose是moneychoose.jsp中的div。 $(".moneychoose") 无法在 ajax 调用中选择。

$("input[name='money']").on("click", function() {
    if ($("#money").find(".moneychoose")) {
        $(".moneychoose").remove();
    }

    //append external html
    $.get("moneychoose.jsp", function (data) {
        $("#money").append(data);
    });

    $.ajax({
        type: "POST",
        url: "src/province_price.json",
        data: '',
        dataType: "json",
        async: "false",
        success: function(response) {
            console.log($(".moneychoose"));
        },
        error: function(qXhr, status, error) {
            alert(status + ':' + error + ':' + qXhr.responseText);
        }
    });
});

但是如果我在“附加外部html”之后添加console.log($(".moneychoose"))， ajax调用中的$(".moneychoose")可以被选择。为什么？但是“append external html”后面的$(".moneychoose")仍然无法被选中。

$("input[name='money']").on("click", function() {
    if ($("#money").find(".moneychoose")) {
        $(".moneychoose").remove();
    }

    //append external html
    $.get("moneychoose.jsp", function (data) {
        $("#money").append(data);
    });

    console.log($(".moneychoose"));

    $.ajax({
        type: "POST",
        url: "src/province_price.json",
        data: '',
        dataType: "json",
        async: "false",
        success: function(response) {
            console.log($(".moneychoose"));
        },
        error: function(qXhr, status, error) {
            alert(status + ':' + error + ':' + qXhr.responseText);
            }
    });
});

Answer 1

您的困惑是因为 console.log 不是同步的。 您的错误是因为两个 AJAX 请求之间存在竞争条件。

//append external html
$.get("moneychoose.jsp", function (data) {
  $("#money").append(data);
});

还有

 $.ajax({
        type: "POST",
        url: "src/province_price.json",
        data: '',
        dataType: "json",
        async: "false",
        success: function(response) {
            console.log($(".moneychoose"));
        },
        error: function(qXhr, status, error) {
            alert(status + ':' + error + ':' + qXhr.responseText);
        }
    });

为了确保 .moneychoose 在 $.ajax 的成功回调中可用，您需要使用一个在两个请求都成功后解析的 Promise ，否则您需要等待执行其中一个请求，直到另一个请求完成。