javascript - 在鼠标悬停或悬停时绑定(bind)到动态生成的元素

Question

我需要为在 javascript 中生成的元素绑定(bind)悬停。例如，当我将鼠标悬停在图标元素上时，会出现关于该图标的独特文本:

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 注入(inject)信息，但它总是会获取索引的信息。我还尝试(下面的示例)设置信息并使用 .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 在评论中提到的，您必须使用事件委托(delegate)。

如果我理解正确的话，这个 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>