在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中不可用。我怎样才能添加它并让它在以后看到。

更新： 我不知道为什么它不能在我的最终工作我只是创造了这个小提琴，它在那里工作正常。

Fiddled

Answer 1

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

您遇到哪些问题？为什么你认为该元素不可用？你尝试过$（）。长度或类似的东西吗？如果切换似乎没有任何效果，可能是由于您没有与我们分享的其他JS或CSS。

Answer 2

您只需在关闭正文标记之前添加脚本即可。