jQuery：如何包装（）动态加载的元素？答案

【问题标题】：jQuery: How do I wrap() a dynamically loaded element?jQuery：如何包装（）动态加载的元素？
【发布时间】：2011-03-24 20:46:23
【问题描述】：

我正在为一个本机没有 HTML 的 3rd 方应用程序设计皮肤。这一切都来自一个 onLoad 事件和一堆 ajax 调用。

我在页面中添加了 jQuery。我需要 wrap() 一个动态加载的元素。如果需要，我可以包含一个插件。

我该怎么做？谢谢。

更新：这可行，但有更好的方法吗？

$(document).ready(function() {

(function() {
  var length = $(".applicationShell").length;

  var h = setInterval(function () {
    if ($(".applicationShell").length > length) {
      length = $(".applicationShell").length;
      clearInterval(h);


      $(".applicationShell").addClass("test")

    }
  }, 100);
})();


});

【问题讨论】：

呃...选择它$()，然后换行？动态加载的元素与“已经存在”的元素没有什么不同。
我会研究如何进行 ajax 调用，看看是否有办法添加全局回调，这样你就可以避免间隔。如您所知，定期在整个 DOM 中搜索这样的类选择器非常昂贵。

标签： jquery

【解决方案1】：

好吧，我似乎找不到更好的解决方案。 :( 这是我用的那个。

$(document).ready(function() {

(function() {
  var length = $(".applicationShell").length;

  var h = setInterval(function () {
    if ($(".applicationShell").length > length) {
      length = $(".applicationShell").length;
      clearInterval(h);


      $(".applicationShell").addClass("test")

    }
  }, 100);
})();


});

【讨论】：

我在幻灯片中包装 div 时遇到问题，但我的代码在幻灯片呈现时异步运行。因此，只有几张幻灯片被选中。无需编辑幻灯片的代码，这使我免于撞墙！

【解决方案2】：

编辑：很遗憾，您可以不能使用livequery 插件来获得您想要的效果。感谢@patrick 指出这一点。 This fiddle 表明它不适用于原生 DOM 元素追加（“你好”保持黑色）。取消注释 fiddle 的最后一行，你会看到当 jQuery 追加最终运行时，livequery 然后“看到”除了 jQuery 之外的本地 DOM 添加（并且两个添加都变为绿色）。

因此，您可能必须坚持使用您问题中的投票解决方案。 jQuery 在有理由检查容器时会看到非 jQuery DOM 添加的事实可能暗示了另一种轮询方式——就像在 Fiddle 中一样在容器上使用 livequery，然后使用setTimeout 执行中性 jQuery 操作（比如容器上的 removeClass('nothing'))。 Livequery 然后会“看到”在投票之间添加的新元素。这确实有效，但我不确定这是一个更好的选择。

【讨论】：

我有同样的答案，但我删除了它，因为我很确定livequery 仅适用于通过 jQuery 添加的元素。来自文档：“如果您的插件修改 DOM 而不使用内置的 DOM 修改方法（append、addClass 等），您可以像这样使用 Live Query 注册您的插件......”
@patrick -- 你可能是对的。我正在尝试仔细阅读文档并查看源代码。

【解决方案3】：

$('#element-id').wrap( "<div class='wrapExample' />" );

如果您发布一些需要帮助的代码，我可以为您提供更具体的帮助。

Helpful link?

【讨论】：

不起作用。元素在就绪块之后动态加载。对不起。
@Glen Lipka 在回调中为您的 ajax 调用执行此操作，而不是在就绪块中。
不幸的是，ajax 调用不是我的。我正在为第三方应用程序蒙皮，但无权访问它的那部分
@Glen Lipka 添加了指向寻求类似帮助的问题的链接。让我知道这是否有帮助
这就是我得到 setInterval 答案的确切链接（巧合）。我希望有一种更像“jQuery”的方式来做到这一点。我想知道为什么没有 DomChanged 事件。

【解决方案4】：

如果你想在另一个事件中这样做，你可以这样做：

$('.clickme').live('click', function() {
  $(myselector).wrap(/* my stuff to wrap */);// Live handler called.
});

“点击”是您希望为其管理行为的事件，而 .clickme 是事件实例化器上的类。

其他选项：将包装作为 ajax 成功的一部分（在这里制作 jquery ajax 的假设）：

...snip
success: function(msg)
            {
                $(myselector).wrap(/* my stuff to wrap */);
            },
...

...

【讨论】：

对不起，这也不好，因为它取决于点击事件。我想在元素出现后立即包装它。