javascript - 将html写入元素的JS回调

Question

我有一个简短的脚本，它写入 documnet.getElement(xxx).innerHTML = myGeneratedHTML。

我还有一段 jquery 代码，用于在生成的 HTML 上编写样式。问题是，我需要在将 HTML 写入文档后运行 jquery 方法。

我需要做一个回调，但我看到的回调是用于从文件和 url 中提取数据，是否有一个回调等待 html 完成写入文档？

Answer 1

我不认为有这样的回调，在将元素写入 DOM 之后，您应该能够立即访问它们 - 在您运行更新 HTML 的函数后，我只需更新样式等。

更好的是，将所有语法保留在 jQuery 中——您已经在使用该库，那么为什么不让自己的生活更轻松，并使用它的功能来做您需要的事情呢？因此，按此顺序使用 jQuery 更新 HTML 和使用 jQuery 的样式，您应该不会发现任何问题。

IE -

$('#wantedElement').html("This is some html");
$('#wantedElement').css("color", "red");

您想在 html 中为新生成的元素设置样式吗？您能否提供一些示例代码（即 html 中的内容myGeneratedHTML）？然后你会做这样的事情：

$('#wantedElement').html("<div class='anotherElement'>This is some html</div>");
$('#wantedElement .anotherElement').css("color", "red");

如果使用 jQuery，你真的不必等待它被编写出来，而且你当然不需要设置循环或使用setInterval来检查它。

在评论中添加关于向来自 JSON 回调的 HTML 添加样式的问题。

所以替换这个：

documnet.getElement(xxx).innerHTML = myGeneratedHTML

有了这个：

$('#someElement').html(connHTML);

在完成上述操作后，您可以立即开始对其进行样式设置，因此上述内容应全部替换为：

//add the generated html from JSON call - where 'connHTML'
//is a variable containing the generated HTML from the JSON
//call and it contains a table

$('#someElement').html(connHTML);

//now style the content
$('#someElement table').css("width","100%");
$('#someElement table').css("background-color","red");
$('#someElement table').css("color","white");

上面的代码可以简化，但为了可读性而写成这样；）

Answer 2

您可以使用间隔来检查元素的 HTML 是否与您的 HTML 匹配：

var intervalCounter = setInterval(function() {
  if(documnet.getElement(xxx).innerHTML == myGeneratedHTML) {
    alert("HTML Loaded");
    clearInterval(intervalCounter);
    intervalCounter = null;
  }
}, 10);

documnet.getElement(xxx).innerHTML = myGeneratedHTML;

Answer 3

我遇到了同样的问题，所以我继续为它写了一个插件。

$(selector).waitExists(function);

和代码：

(function ($) {

$.fn.waitExists    = function (handler, shouldRunHandlerOnce, isChild) {
    var found       = 'found';
    var $this       = $(this.selector);
    var $elements   = $this.not(function () { return $(this).data(found); }).each(handler).data(found, true);

    if (!isChild)
    {
        (window.waitExists_Intervals = window.waitExists_Intervals || {})[this.selector] =
            window.setInterval(function () { $this.waitExists(handler, shouldRunHandlerOnce, true); }, 500)
        ;
    }
    else if (shouldRunHandlerOnce && $elements.length)
    {
        window.clearInterval(window.waitExists_Intervals[this.selector]);
    }

    return $this;
}

}(jQuery));