jQuery on() AJAX
As of jQuery 1.7, the .live() function has been deprecated. The documents tell you to use the .on() function instead. There’s are some differences in the way things are handled and I stumbled upon the issue of binding hover(mouseenter and mouseleave specifically) to AJAX loaded content. Skip the semantics and jump into the code:
<!-- HTML -->
<ul class="hoverable">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
// pre jQuery 1.7
$(".hoverable .item").live("mouseenter", function(){ $(this).addClass("hover"); });
$(".hoverable .item").live("mouseleave", function(){ $(this).removeClass("hover"); });
// jQuery 1.7+
$(document).on("mouseenter", ".hoverable .item", function() {
$(this).addClass("hover");
}).on("mouseleave", ".hoverable .item", function() {
$(this).removeClass("hover");
})
There you have it

