这是我的代码：
$(".feat").click(function () {
$('#content').empty();
$('#content').load('loaded/features.html', function() {
$('.expla').hide();
$('.g1,.g2,.g3,.g4,.g5,.g6').hide();
$('.f1,.f2,.f3,.f4,.f5,.f6').hide();
$('.w1,.w2,.w3,.w4,.w5,.w6').hide();
});
这是features.html，但与此无关：
<div id="eruscont">
<div id="erustyle">What I can do !</div>
<div id="undercore">
<div id="grinder">
<div class="title grinder plus"><p>Grinder <img src="image/add.png" /></p></div>
</div>
<div id="flyer">
<div class="title flyer plus"><p>Flyer <img src="image/add.png" /></p></div>
</div>
<div id="whack">
<div class="title whack plus"><p>WHack <img src="image/add.png" /></p></div>
</div>
</div><!-- Fin undercore -->
</div><!-- Fin eruscont -->
<div id="schema"><div id="mainstuff"><p>Browse my main options, and you'll see what I'm able to do for you !</div>
<div class="expla egrinder">
<div class="explication g1">Define a path and kill mobs</div>
<div class="explication g2">Smart movement/path system</div>
<div class="explication g3">Loots, skins, gathers using ground mount</div>
<div class="explication g4">Sells, buys, repairs, mails stuff</div>
<div class="explication g5">Automatic spell casting highly customizable</div>
<div class="explication g6">Computer still available for use when running</div>
</div>
<div class="expla eflyer">
<div class="explication f1">Define a path and gather resources</div>
<div class="explication f2">Kills, loots, skins, mines, Herbs</div>
<div class="explication f3">Uses flying mount and Swiming mount</div>
<div class="explication f4">Sells, buys, repairs, mails stuff</div>
<div class="explication f5">Analyzes your skill level and pick up what you can have</div>
<div class="explication f6">Computer still available for use when running</div>
</div>
<div class="expla ewhack">
<div class="explication w1">Use your character differently</div>
<div class="explication w2">Fly hack, Water Walk, Wall walk</div>
<div class="explication w3">Removes collision, AFK, falling and Lua protection</div>
<div class="explication w4">Auto Loot, Auto kick, tracking and morpher</div>
</div>
</div>
expla.g1…、f1…、w1…是位于features.html中的元素。但是它们并没有被hide（）方法隐藏，而且在稍后的代码中，我使用show（）方法来使这些元素因不同的事件而出现。
我想问题是由于load（）的结果没有添加到DOM中。但我不知道如何管理它。我对jquery不是很在行。
你能帮我吗？
感谢阅读！
编辑：我错了，隐藏效果起作用了，我只是瞄准了错误的元素。但在加载的元素不可用之后，我的意思是，例如，这不起作用：
if($('.expla.eflyer').is(':visible') || $('.expla.ewhack').is(':visible'))
{
$('.expla').hide();
$('#mainstuff').hide();
$('.flyer img').attr({src: "image/add.png" });
$('.whack img').attr({src: "image/add.png" });
$('.flyer','.whack').addClass('plus');
$('.g1,.g2,.g3,.g4,.g5,.g6').hide();
$('.w1,.w2,.w3,.w4,.w5,.w6').hide();
$('.grinder').removeClass('plus');
$('.f1,.f2,.f3,.f4,.f5,.f6').hide();
$('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function () { callback("g")});
$('.grinder img').attr({src: "image/minus.png" });
return false;
}
这段代码位于另一个js文件中，由于缺乏优化，该文件非常混乱，但运行正常，如果你想看看它有多复杂，这里是整个页面：
$(document).ready(function()
{
$('.expla').hide();
$('.g1,.g2,.g3,.g4,.g5,.g6').hide();
$('.f1,.f2,.f3,.f4,.f5,.f6').hide();
$('.w1,.w2,.w3,.w4,.w5,.w6').hide();
// run the currently selected effect
$(".grinder img").click(function () {
if($('.grinder').hasClass('plus'))
{
if($('.expla.eflyer').is(':visible') || $('.expla.ewhack').is(':visible'))
{
$('.expla').hide();
$('#mainstuff').hide();
$('.flyer img').attr({src: "image/add.png" });
$('.whack img').attr({src: "image/add.png" });
$('.flyer','.whack').addClass('plus');
$('.g1,.g2,.g3,.g4,.g5,.g6').hide();
$('.w1,.w2,.w3,.w4,.w5,.w6').hide();
$('.grinder').removeClass('plus');
$('.f1,.f2,.f3,.f4,.f5,.f6').hide();
$('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function () { callback("g")});
$('.grinder img').attr({src: "image/minus.png" });
return false;
}
else
{
$('#mainstuff').hide();
$('.g1,.g2,.g3,.g4,.g5,.g6').hide();
$('.grinder').removeClass('plus');
$('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function () { callback("g")});
$('.grinder img').attr({src: "image/minus.png" });
return false;
}
}
else
{
$('.grinder img').attr({src: "image/add.png" });
$('.g1,.g2,.g3,.g4,.g5,.g6').hide();
$('.expla.egrinder').hide("explode", 1500);
$('.grinder').addClass('plus');
return false;
}
});
$(".flyer img").click(function () {
if($('.flyer').hasClass('plus'))
{
if($('.expla.egrinder').is(':visible') || $('.expla.ewhack').is(':visible'))
{
$('.expla').hide();
$('#mainstuff').hide();
$('.grinder img').attr({src: "image/add.png" });
$('.whack img').attr({src: "image/add.png" });
$('.grinder','.whack').addClass('plus');
$('.g1,.g2,.g3,.g4,.g5,.g6').hide();
$('.w1,.w2,.w3,.w4,.w5,.w6').hide();
$('.flyer').removeClass('plus');
$('.f1,.f2,.f3,.f4,.f5,.f6').hide();
$('.expla.eflyer').show("blind", { direction: "vertical" }, 3000,function () { callback("f")});
$('.flyer img').attr({src: "image/minus.png" });
return false;
}
else
{
$('#mainstuff').hide();
$('.f1,.f2,.f3,.f4,.f5,.f6').hide();
$('.flyer').removeClass('plus');
$('.expla.eflyer').show("blind", { direction: "vertical" }, 3000,function () { callback("f")});
$('.flyer img').attr({src: "image/minus.png" });
return false;
}
}
else
{
$('.flyer img').attr({src: "image/add.png" });
$('.expla.eflyer').hide("explode", 1500);
$('.f1,.f2,.f3,.f4,.f5,.f6').hide();
$('.flyer').addClass('plus');
return false;
}
});
$(".whack img").click(function () {
if($('.whack').hasClass('plus'))
{
if($('.expla.egrinder').is(':visible') || $('.expla.eflyer').is(':visible'))
{
$('.expla').hide();
$('#mainstuff').hide();
$('.grinder img').attr({src: "image/add.png" });
$('.flyer img').attr({src: "image/add.png" });
$('.grinder','.flyer').addClass('plus');
$('.g1,.g2,.g3,.g4,.g5,.g6').hide();
$('.w1,.w2,.w3,.w4').hide();
$('.whack').removeClass('plus');
$('.f1,.f2,.f3,.f4,.f5,.f6').hide();
$('.expla.ewhack').show("blind", { direction: "vertical" }, 3000,function () { callback("w")});
$('.whack img').attr({src: "image/minus.png" });
return false;
}
else
{
$('#mainstuff').hide();
$('.w1,.w2,.w3,.w4').hide();
$('.whack').removeClass('plus');
$('.expla.ewhack').show("blind", { direction: "vertical" }, 3000,function () { callback("w")});
$('.whack img').attr({src: "image/minus.png" });
return false;
}
}
else
{
$('.whack img').attr({src: "image/add.png" });
$('.expla.ewhack').hide("explode", 1500);
$('.w1,.w2,.w3,.w4').hide();
$('.whack').addClass('plus');
return false;
}
});
// Grinder callbacks
// Flyer callbacks
//WHack callbacks
function callback(xlol) {
var pif = "."+xlol+"1";
var arg = xlol;
$(pif).show("slide", 200, function () { call2(arg)});
};
function call2(xlol) {
var pif = "."+xlol+"2";
var arg = xlol;
$(pif).show("slide", 200,function () { call3(arg)});
};
function call3(xlol) {
var pif = "."+xlol+"3";
var arg = xlol;
$(pif).show("slide", 200,function () { call4(arg)});
};
function call4(xlol) {
var pif = "."+xlol+"4";
var arg = xlol;
$(pif).show("slide", 200,function () { call5(arg)});
};
function call5(xlol) {
var pif = "."+xlol+"5";
var arg = xlol;
$(pif).show("slide", 200,function () { call6(arg)});
};
function call6(xlol) {
var pif = "."+xlol+"6";
$(pif).show("slide", 200);
};
});
在HTML中将它们设置为display: none，它们在加载时不会显示（甚至短暂）。稍后的.show()方法仍将显示它们。
您的代码有一些问题。
首先，您的语法被破坏了（我认为是因为为了简洁起见，您删掉了一些代码）。
除此之外，您还试图操作创建DOM时不存在的元素。你应该事先隐藏所有你想要的元素，你可以使用：
.explication {
display: none;
}
然后使用$.on()方法触发它们在事件中显示。
$(document).on('click', 'someSelector', function() {
$('.someOtherSelector').show();
});
您可以尝试设置$("YourElement").css("opacity","0")、$("YourElement").css("visibility","hidden")或$("YourElement").css("display","none")