2011-11-03 23 views
0

我一直在使用jQuery的.live一段時間來綁定事件處理程序動態生成的元素。Jquery .delegate似乎不適合我的懸停

隨着即將發佈的jQuery 1.7的發佈,我對即將被棄用的.delegate函數做了一些閱讀,它替代了1.7 .on命令,它完全替代了.live,並且應該更快。

無論如何,我已經開始在我的代碼中轉換一些.live的用法,雖然這似乎對'click'事件很好,但我無法獲得.delegate或.on以使用任何懸停/ moouseenter事件。

有人可以描述這個代碼有什麼問題,並告訴我我應該做什麼?現在

$('body').delegate('.project_open', 'mouseenter', function() { 

    $(this).addClass("hovered"); 

    }); 

爲.project_open的容器是動態生成這就是爲什麼我使用「身體」作爲不改變處理程序。如果我使用新的.on函數,則完全相同。

如果我使用.live,它可以很好地工作。任何想法,我錯了?謝謝。

回答

0

如果.project_open位於另一個控件(如ul或div或另一個控件)內,它將不起作用。

它將在這種情況下工作:

<body> 
    <div class=".project_open"> 
    </div> 
</body> 
$('body').delegate('.project_open', 'mouseenter', function() { 

    $(this).addClass("hovered"); 

    }); 

它不會在這種情況下工作,因此,如果您附加額外的容器。

<body> 
    <div> 
     <div class=".project_open"> 
     </div> 
    </div> 
</body> 
$('body').delegate('.project_open', 'mouseenter', function() { 

    $(this).addClass("hovered"); 

    }); 
+0

我明白了,所以纔會.live仍然在這種情況下建議?或者仍然可以通過更具體的選擇器來使用.delegate? – gordyr

0

「上」的類選擇只需使用:

$('.project_open').on('mouseenter', function() { 
    $(this).addClass("hovered"); 
}); 

理論委託:

附加一個處理程序,以一個或多個事件的 選擇相匹配的所有元素,現在或將來,基於一組特定的根元素 。從jQuery 1.7開始,.delegate()已被 .on()方法取代。然而,對於早期版本,它仍然是使用事件委派的最有效手段。有關事件 綁定和委派的更多信息在.on()方法中。

理論住:

說明:將一個事件處理程序 電流選擇,現在和將來匹配這,所有的元素。從jQuery 1.7開始,不推薦使用.live() 方法。使用.on()附加事件處理程序。舊版本的jQuery 的用戶應該優先使用.delegate()而不是 .live()。此方法提供了一種將處理程序的委託事件附加到頁面的文檔元素的方法,該方法在內容動態添加到頁面時簡化了事件處理程序的使用 。有關 的.on()方法中直接與委派事件的討論,請參閱 的更多信息。根據其 後繼改寫.live()方法很簡單。

檢查工作的例子:http://jsfiddle.net/KeesCBakker/hgGec

+0

謝謝,但由於一些奇怪的原因,這對我不起作用。使用與您的示例完全相同的代碼會拋出一個jQuery錯誤=(a ||「」).split不是函數。如果我用'live'替換'delegate',一切正常。你的jsfiddle似乎也不工作。 – gordyr