Question

我有几页，例如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>

所以当onhover a1.html .hover类，然后页面加载a2.html .wrap并追加到a1.html的正文，在同一页面上，现在我们有a2.html＆＃ 39; s内容。什么时候悬停a2.html＆＃39; .hover＆＃39; （仍然在a1.html上）然后加载a3.html的内容等等

$('.hover').on('mouseover', function(){
   $.get( "/a2.html", function( data ){   
 ///a2.html should be a variable

   $('section', data).appendTo('body');
  });
});

我的问题是如何在onhover .hover课程中只加载一次a2.html，a3.html或a4.html内容。如何测试a2.html是否已经加载，请不要再次加载？感谢

Answer 1

尝试类似的东西。

$('.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）的方式仅会对现有 DOM元素绑定mouseover事件。

如果您想影响所有现有和未来的 DOM元素。你必须这样使用它：

$('body').on('mouseover', '.hover', function(){
    /// your instructions
});

希望这会有所帮助。

Answer 2

最简单的方法是$（..）。one（event，handler）。但是如果你真的需要在以异步和承诺的方式加载一次并且只加载一次后做一些事情呢？

我已经实现了面向同一问题的卡片ui应用程序：在另一个html文件中定义的卡片，必须加载并且只在更新/显示其内容之前加载一次。我的解决方案基于jQuery Promises API和一个简单的缓存。希望有用，这是我的代码的一部分（真正的代码要复杂得多）：

function expect(proc) {
    var cache = {};
    return function(key) {
        if (!cache[key]) {
            cache[key] = $.Deferred(function(deferred) {proc(deferred, key); })
                          .promise();
        }
        return cache[key];
    };
}

var cards = expect(function(deferred, url) {
    var $loader = $('div');
    function whenDone() {
        deferred.resolve(loader.contents());
    }
    $loader.load(url).then(whenDone);
});

cards('MyCard.html').done(function(contents) {
    // It is promised that MyCard is loaded, do what you want here
});

jquery页面加载以获取另一个页面内容，mouseover如何加载一次

2 个答案: