写html到元素的回调

JS Callback on writing html to element

本文关键字：回调 元素 html      更新时间：2023-09-26

我有一个写进documentet . getelement (xxx)的短脚本。innerHTML = myGeneratedHTML.

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

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

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

更好的是，把你所有的语法都放在jQuery中——你已经在使用这个库了，所以为什么不让你自己的生活更轻松，使用它的函数来做你需要的事情呢?因此，使用jQuery更新HTML和使用jQuery按此顺序更新样式，您应该不会发现任何问题。

ie - 

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

上面的代码可以简化，但是为了可读性，这样写;)

你可以使用一个间隔来检查元素的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;

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

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

相关文章：