2013-04-25 67 views
0

我有一個網站,其中包含從網格切換到列表切換jQuery功能。 在另一外部js文件有以下功能從網格切換到列表後jQuery的功能不工作

$(function(){ 
$('.image a img').hover(
function() { 
    $(this).stop().fadeTo('slow', 0.7); 
    }, 
function(){ 
    $(this).stop().fadeTo('slow', 1); 
} 
); 
}); 

這是工作僅在第一次。 如果我從「網格」切換到「列表」或反之亦然,它不再工作。

在google開發人員工具中,切換後內聯樣式消失。 有沒有簡單的解決方案來「重新裝載」上面的功能?

回答

0

問題是你沒有重置隊列。所以如果你快速地將鼠標移出/移出鼠標。它什麼都不會顯示。試試這個:

$('body').on("mouseenter", ".image a img", function() { 
    $(this).stop(true, false).fadeTo('slow', 0.7); 
    }) 
.on("mouseleave", ".image a img", function(){ 
    $(this).stop(true, false).fadeTo('slow', 1); 
}); 

這將重置隊列,但不會跳到最後。另外,您可以使用LIVE元素將事件保持在所有變化的項目上。這是在新的jQuery 1.8以來

+0

問題是,代碼工作,直到我使用「開關網格」功能。剩下的就沒事了。對不起,如果我不夠清楚。 – Someone33 2013-04-25 17:12:06

+0

非常感謝@Niels!它現在正在工作,但谷歌開發者工具中的內聯樣式仍然消失。任何想法爲什麼? – Someone33 2013-04-25 17:21:57

+0

jQuery放置內聯樣式。但是當它100%或0時,它將不顯示或阻止。 – Niels 2013-04-25 17:34:57

0

我會嘗試這樣的事情」

$('.image a img').on({ 
    mouseenter: function() { 

     $(this).stop().fadeTo('slow', 0.7); 

     }, 
     mouseleave: function() { 

     $(this).stop().fadeTo('slow', 1); 

    } 
    }); 
0

可以肯定我會看到更多的代碼,但也許原因是引用的功能結合.hover事件到綁定時刻(它在文檔就緒事件)上匹配查詢$('.image a img')的所有元素,所以如果稍後添加新元素(編輯:我猜測,您的切換功能會這樣做),即使匹配查詢$('.image a img').hover將不會被定義爲它們。切換到$(.image container').on("mouseenter mouseleave",'.image a img', handlerInOut),其中.image container是其中.image a img是一個元素,看它是否是h ELPS。