Javascript 在对DOM调用js函数之前，如何确保将动态生成的div加载到DOM中？

我正在使用ajax提交表单，并打开一个带有响应数据的颜色框：

$("#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>

---

Flot plot函数需要打印占位符div的宽度和高度才能工作。所以我认为在绑定/调用plot函数时，我的plot占位符div没有加载到DOM中？在谷歌搜索了很多类似的问题后，我找不到一个例子来说明如何让这项工作起作用。如何在这里进行故障排除？提前感谢。

您需要使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...

---

您可以使用

$执行此操作。post

，有一个成功的回调。这不是关于回调，而是关于异步：trueedit my post将异步切换为同步，抱歉，我累了：）。我还添加了一条评论，说您可以在之后调用您的方法。但是在成功中，回调是一个更好的地方，正如jrummell所说的那样。您难道不能在成功处理程序中简单地调用

plotData（）

？还是我遗漏了什么？

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

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