Question

我有动态HTML内容

<div id="parent">
    <div class="child">
        Hover Text
    </div>
</div>

当我尝试使用此代码将“悬停文本”悬停在子元素内时，它不起作用。

$("#parent").on('hover', '.child', function()
{
    alert("Hello");
});

此代码

$('#parent').on('hover', '.child', function(e) {
    ...
});

我使用jq vs 1.10.2

Answer 1

如果动态生成整个div#parent块，您可能需要将hover侦听器绑定到文档本身，如下所示。

另外，我建议使用mouseenter和mouseleave个侦听器，因为jQuery 1.9中删除了hover简写。

在jQuery 1.8中不推荐使用，在1.9中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。

这是我的样本：

jQuery(document).on('mouseenter', '#parent .child', function (e) {
    jQuery(this).css('backgroundColor','#F00');
}).on('mouseleave', '#parent .child', function (e) {
    jQuery(this).css('backgroundColor','#FFF');
});

http://jsfiddle.net/UX8z5/1/

Answer 2

尝试使用mouseenter添加mouseleave和on()个事件。这是一个例子：

$(function(){
    $("#parent").on({
        mouseenter : function(e){
            alert("Mouse enter");
        },
        mouseleave : function(e){
            alert("Mouse leave");
        }
    }, ".child");
});

jsfiddle：http://jsfiddle.net/ashishanexpert/2XG9j/

Answer 3

您可以使用.hover()方法为mouseenter和mouseleave事件绑定处理程序。您可以使用它在鼠标位于元素中时简单地将行为应用于元素。

$(document).ready(function(){
   $('#parent .child').hover(function(){
    alert("Hello");
   });
});

Try in .hover() in Jsfiddle

您还可以使用.mouseover()事件。

$(document).on('mouseover', '#parent .child', function(){
    alert("Hello");
});

Try mouseover event handler fiddle

但是，最佳做法是使用事件委派绑定mouseenter和mouseleave事件。

$(document).ready(function(){
    $('#parent').on({
        mouseenter: function() {
            alert('Hello');
        },
        mouseleave: function() {
            alert('bye..!!!');
        }
    }, ".child");
});

Try in fiddle

如何使.hover（）与.on（）一起工作？

3 个答案: