Question

在代码中，.moneychoose是moneychoose.jsp中的div。在ajax调用中无法选择$（＆＃34; .moneychoose＆＃34;）。

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

但是如果我在＆＃34;添加外部html＆＃34;之后添加console.log（$（＆＃34; .moneychoose＆＃34;）），可以选择ajax调用中的$（＆＃34; .moneychoose＆＃34;）。为什么？然而，$（＆＃34; .moneychoose＆＃34;）＆＃34;追加外部html＆＃34;仍然无法选择。

$("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，或者您需要等待执行其中一个请求，直到另一个完成。

jQuery选择ajax调用中的附加元素不起作用

1 个答案: