在 DOM Ready 之后添加元素并使它们可见，而无需事件处理程序答案

【问题标题】：Adding elements after DOM Ready and make them visible without the need of an event handler在 DOM Ready 之后添加元素并使它们可见，而无需事件处理程序
【发布时间】：2011-03-28 14:11:01
【问题描述】：

在 dom 准备好之后添加一个元素，而不需要事件处理程序：

jQuery(document).ready(function() {
var $body = $('body');
var strLoading = '<div id="ajax_loader" style="display:none">Loading ...</div>';
$body.append(strLoading); // add loading text to dom
var $Loading = $('#ajax_loader');

$('some unrelated element already available at time of dom ready').click(function{

$Loading.toggle(); // show loading message

LOAD SOME CONTENT THROUGH AJAX

$Loading.toggle(); // hide loading message

});
});

我现在想像这样按需显示和隐藏它：

$('some unrelated element already available at time of dom ready').click(function{

$Loading.toggle(); // show loading message

LOAD SOME CONTENT THROUGH AJAX

$Loading.toggle(); // hide loading message

});

似乎该元素在 dom 中不可用。我怎样才能添加它并让它稍后看到。

更新：我不知道为什么它在我的最后不起作用我刚刚创建了这个小提琴并且它在那里工作正常。

Fiddled

【问题讨论】：

我不知道你做了什么，但是下一次，尝试过去正确的代码，而不是带有语法高亮信息的代码。
@FelixKling：大声笑，我以前从未见过。看起来很乱
我没有看到代码有任何问题:(
@Caren：您的代码是在$(document).ready() 附件中还是在正文标签的末尾？
@Caren：嗯，现在可以了，但最初看起来像这样：stackoverflow.com/revisions/…（查看所有奇怪的 div 和 span）

标签： jquery dom element

【解决方案1】：

您发布的代码没有任何问题。尝试在其他地方找到问题。

您对哪个元素有问题？为什么您认为该元素不可用？您是否尝试过 $().length 或类似的东西？如果切换似乎没有任何效果，可能是由于您没有与我们共享的其他 JS 或 CSS。

【讨论】：

第一个代码块准备在 dom 准备好后将元素添加为 body 的最后一个子元素。一旦用户单击指定的元素，我想显示作为 body 的最后一个子元素的加载元素，并且在 ajax 完成后，再次隐藏该元素。 css 的唯一代码是 #ajax_loader { display: none }

【解决方案2】：

您可以在结束正文标记之前简单地包含您的脚本。

【讨论】：