jQuery выберите добавленный элемент в дозе вызова ajax не работает

Question

В коде, .moneychoose - это div в moneychoose.jsp. $ (". 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); 
     } 
    }); 
}); 

Но если я добавить console.log ($ ("moneychoose ")) после того, как "добавить внешний HTML", $ (". Moneychoose") в Ajax-вызов может быть выбран. Зачем? однако $ (". moneychoose") после "append external html" по-прежнему не может быть выбран.

$("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, вам нужно будет либо использовать обещание, устраняющее когда оба запроса преуспели, или вам нужно будет дождаться выполнения одного из запросов до завершения другого.