如何確保在調用js函數之前將動態生成的div加載到DOM中？

Question

我正在使用ajax提交表單，並使用響應數據打開一個Colorbox：

$("#submitB").click(function () {
    $.post("/previewproposal", $("#proposal-form").serialize(), function(data){$.colorbox({html:data});}, "html");
});

呈現的html是這樣的：

<script type="text/javascript">
    $(document).ready(function(){

        function plotData()
        {
            var dataArray = ...;
            var options = ...;

            $.plot($("#placeholder"), dataArray, options);
        }

        plotData();
    });
</script>

<div id="placeholder" style="float:left;margin:0;font-size:8pt;width:540px;height:180px;"></div>

動態生成的div之一是Flot繪圖占位符。 我目前收到以下錯誤：

uncaught exception: Invalid dimensions for plot, width = null, height = null

繪圖功能需要繪圖占位符div的寬度和高度才能起作用。 所以我想我的繪圖占位符div在綁定/調用繪圖函數時未加載到DOM中嗎？ 經過大量的搜索並找到了與此類似的問題之后，我找不到如何進行此工作的示例。 我該如何解決？ 提前致謝。

Answer 1

您需要使ajax同步，但是包裝器$ .post（）無法實現。 因此將其更改為：

$.ajax({
  type: "POST",
  async:false,
  url: "/previewproposal",
  data: $("#proposal-form").serialize(),
  success: function(data){
         $.colorbox({html:data});
  },
  dataType: 'html'
});

//you can call plotData() here...