我有几个页面，例如a1.html，a2.html，a3.html，a4.html，a5.html...。所有页面的HTML标记看起来像
<div class="wrap"> <header>Header 2</header> <saection>Section 2</section> <footer> <div class="hover"></div> </footer> </div>
因此，当将鼠标悬停在a1.html.hover类上时，页面将.wrap在同一页面上加载a2.html和appendTo a1.html的正文，现在我们有了a2.html的内容。悬停时a2.html的'.hover'（仍在a1.html上）然后加载a3.html的内容，依此类推
$('.hover').on('mouseover', function(){
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
});
我的问题是在悬停.hover类时如何仅一次加载a2.html，a3.html或a4.html内容。我如何测试a2.html是否已经加载，然后不要再次加载？谢谢
尝试类似的事情。
$('.hover').on('mouseover', function(){
if (!$(this).data('active')) {
$(this).data('active', true);
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
}
});
使用数据集存储标记（active在此），您可以稍后将其删除并再次处理处理程序指令。
如果你真的想一次（而且永远不会更高版本）加载它，取代on用one在你的代码（由@SSS所讲述）。
$('.hover').one('mouseover', function(){
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
});
请注意：您使用on（或one）的方式mouseover只会将事件绑定到现有DOM元素上。
如果要影响所有现有和将来的DOM元素。您必须以这种方式使用它：
$('body').on('mouseover', '.hover', function(){
/// your instructions
});
希望对您有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句