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）作为父语境。这是他们从jQuery库中删除.live()的主要原因之一。使其更具体，因此事件不会在您的页面上的每个鼠标悬停上冒泡。让它变得更具体！ #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 delegate events：

的正确道路上

$('.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();
});

DEMO FIDDLE

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

3 个答案: