在鼠标悬停或悬停时绑定到动态生成的元素

Question

我需要为 javascript 中生成的项目绑定悬停。例如，当我将鼠标悬停在一个图标元素上时，会出现关于该图标的唯一文本：

for (var i = 0; i < items.length; i++) {
    $('.items').append('<div class="icon' + i + '"></div>');
    $('.itemInfo').append('<div class="info' + i + '">' + name + '</div>');
}

我试过使用jQuery .hover() 和.on()，并在图标悬停时通过javascript 注入信息，但它总是会获取索引信息.我还尝试（下面的示例）设置信息并使用 .hide()，然后在图标悬停时使用 .show() 并且什么也没有出现。但是，调试器告诉我它正在进入函数，索引仍然是最后一个。

for (var i = 0; i < items.length; i++) {
    $('.items').append('<div class="icon' + i + '"></div>');
    $('.itemInfo').append('<div class="info' + i + '">' + name + '</div>');

    $('.icon' + i).on({
        mouseenter: function () { $('.itemInfo' + i).show(); },
        mouseleave: function () { $('.itemInfo' + i).hide(); }
    });
}

请注意，出于 UI 样式目的，我将图标和信息分成两个不同的 div。还有其他正在生成的图标，其中项目的数量是已知的，因此它们能够遵循该结构。不确定是否打破 html/css 的设置方式并将图标和信息放在同一个 div 下会更好地处理这种我不知道生成了多少项目的情况.

Answer 1

如 Jeromy French 的评论所述，您必须使用事件委托。

如果我理解正确的话，这个 jsFiddle 应该适合你。

var items = ['first', 'second', 'third'];

for (var i = 0; i < items.length; i++) {
    $('.items').append('<div class="icon' + i + '">Item ' + (i + 1) + '</div>');
    $('.itemInfo').append('<div class="info' + i + '">' + items[i] + '</div>');
}

$('.items').on('mouseover', "div[class^='icon']", function(evt){
    //console.log('over', evt);
    var id = evt.currentTarget.className.split('icon')[1];
    //console.log(id);
    $('.info' + id).show();
});

$('.items').on('mouseout', "div[class^='icon']", function(evt){
    //console.log('out', evt);
    var id = evt.currentTarget.className.split('icon')[1];
    //console.log(id);
    $('.info' + id).hide();
});

div[class^="info"] {
    display: none;
}

.itemInfo {
    background-color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items"></div>
<div class="itemInfo"></div>

在鼠标悬停或悬停时绑定到动态生成的元素

Bind on mouseover or hover to dynamically generated elements

html

javascript

css

jquery

hover