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

Question

在 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 中不可用。我怎样才能添加它并使其稍后可见。

更新： 我不知道为什么它在我的最后不起作用，我刚刚创建了这个小提琴，它在那里工作得很好。

摆弄

Answer 1

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

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

Answer 2

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