Question

我有一个写入documnet.getElement（xxx）.innerHTML = myGeneratedHTML的短脚本。

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

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

Answer 1

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

更好的是，在jQuery中保留所有语法 - 你已经使用了库，那么为什么不让自己的生活变得更轻松并使用它的功能来做你需要的呢？所以使用jQuery更新HTML并使用jQuery按照这个顺序更新样式，你应该没有发现任何问题。

即 -

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

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

$('#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));

关于将html写入元素的JS回调

3 个答案: