Question

我有一个外部JavaScript库来生成一些格式化的内容。我们称之为ExternalLibrary.GenerateGutterDivs()

此代码生成一个包含一些div的表结构，如：

<table>
  <tr>
    <td class="gutter">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       ...
    </td>
  <tr>
</table>

生成表后，我想按如下方式操作生成的DOM对象：

<script type="text/javascript">
    ExternalLibrary.generateGutterDivs();

    alert("shomething"); //if I comment this I don't see the second alert

    $("td.gutter > div").each(function(index, val)
    {
        alert("gutterfound");
    });
</script>

问题是如果我删除第一个alert("something")，我看不到第二个警报。这使得考虑DOM可能不是内容刷新。你知道为什么我会遇到这种情况吗？

先谢谢。

Answer 1

这是一个常见问题。您应该从MyCode.generateGutterDivs()返回对div的引用，例如：

MyCode.generateGutterDivs = function () {
    var safeReference = $("<div>1</div><div>2</div><div>3</div>")
        .appendTo("td.gutter");
    return safeReference;
};

然后：

<script type="text/javascript">
    var divs = MyCode.generateGutterDivs();

    divs.each(function(index, val)
    {
        alert("gutterfound"); // Should see 3 of these now
    });
</script>

编辑：由于修改库不是海报的选项，我认为setTimeout为0毫秒就可以完成这一操作，让浏览器完成更新DOM：

<script type="text/javascript">
    MyCode.generateGutterDivs();

    setTimeout(function () {
       divs.each(function(index, val)
       {
          alert("gutterfound"); // Should see 3 of these now
       });
    }, 0);
</script>

Answer 2

在触发jQuery代码段之前，

MyCode.GenerateGutterDivs()尚未完成DOM元素的生成。您需要修改MyCode.GenerateGutterDivs()以接受回调函数，类似于此：

MyCode.GenerateGutterDivs(function() {
    $("td.gutter > div").each(function(index, val) {
        alert("gutterfound");
    });
});

//inside MyCode
GenerateGutterDivs = function(callback) {
    // Generate formatted content.
    callback();
};

以下是概念验证：http://jsfiddle.net/gnbNt/2/

是否使用jQuery立即刷新DOM？

2 个答案: