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

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

Answer 1

正如Jeromy French的评论中提到的，你必须使用事件委托。

如果我已正确理解，jsFiddle应该适合您。

＆＃13;

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

＆＃13;

div[class^="info"] {
    display: none;
}

.itemInfo {
    background-color: lightgray;
}

＆＃13;

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

＆＃13;

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

1 个答案: