jQuery将悬停添加到动态生成的元素

Question

我在下面动态创建元素

<ul class="services-list clearfix">
                    <li class="services-1" data-service-title="Hint 1"></li>
                    <li class="services-2" data-service-title="Hint 1"></li>
                    <li class="services-3" data-service-title="Hint 1"></li>
                    <li class="services-4" data-service-title="Hint 1"></li>
                    <li class="services-5" data-service-title="Hint 1"></li>
                    <li class="services-6" data-service-title="Hint 1"></li>
                </ul>

然后我需要在这个元素中加入悬停。

我试过这段代码

$('.services-list > li').on({
    mouseenter: function () {
        var service_title = $(this).data( 'service-title' );
        $('<span class="service-hint"></span>').text(service_title).appendTo($(this));
    },
    mouseleave: function () {
        $('.services-list > li').find('.service-hint').remove();
    }
});

还有这个

$(document).on('hover', '.services-list > li', function () {
    var service_title = $(this).data( 'service-title' );
    $('<span class="service-hint"></span>').text(service_title).appendTo($(this));
}, function () {
    $('.services-list > li').find('.service-hint').remove();
});

但两者都起不了作用。怎么了？怎么修呢？

Answer 1

第一个区域只是一个普通的.on()事件，因为您是以对象格式创建的，所以可以将parent上下文/选择器放在末尾。这将使它成为一个委托事件。

$('.services-list > li').on({
    mouseenter: function () {
        /* code */
    },
    mouseleave: function () {
        /* code */
    }
}, $('body') ); // <-- now it's delegated to the parent context of body
            // use something more specific, maybe an ID of an <div> around your area

这应该能起作用。

此外，作为附带说明：

不要使用document (或如我前面所示的body )作为父上下文。这是他们从.live()库中删除jQuery的主要原因之一。让它更加具体，这样事件就不会出现在你页面上的每个鼠标上。把它说得更具体些！#parentDiv之类的。

Answer 2

如果您唯一关心的是在添加这些元素时可以在mouseover上显示其他文本，我建议使用纯CSS来实现以下功能：

HTML代码

<ul class="services-list clearfix">
    <li class="services-1" data-service-title="Hint 1">Service 1 <span class="hint">Hint 1</span></li>
    <li class="services-2" data-service-title="Hint 1">Service 2 <span class="hint">Hint 2</span></li>
    <li class="services-3" data-service-title="Hint 1">Service 3 <span class="hint">Hint 3</span></li>
    <li class="services-4" data-service-title="Hint 1">Service 4 <span class="hint">Hint 4</span></li>
    <li class="services-5" data-service-title="Hint 1">Service 5 <span class="hint">Hint 5</span></li>
    <li class="services-6" data-service-title="Hint 1">Service 6 <span class="hint">Hint 6</span></li>
</ul>

CSS代码

.services-list li span {
    display: none;
}

.services-list li:hover span {
    display: inline;
}

http://jsfiddle.net/jghr2cgv/

如果这是不可能的，那么使用jQuery委托事件就可以选择正确的路径。

$('.services-list-container').on('mouseenter', '.services-list li', function () {
    // Mouse over $(this) element, even if the element was added later, but container was present initially
});

必须将这种类型的事件处理附加到事件绑定时存在的元素。我建议为该任务设置一个容器，而不是document，正如我在回答的第二部分中所暗示的那样。

Answer 3

你应该试着：

$(document).on('mouseover', '.services-list > li', function () {
var service_title = $(this).data( 'service-title' );
$('<span class="service-hint"></span>').text(service_title).appendTo($(this));
 }, function () {
$('.services-list > li').find('.service-hint').remove();
});

演示小提琴