动态内容鼠标悬停

Question

我有一个动态生成的html-content：div class='dynamicWrap'。我需要在这个元素上处理鼠标悬停：

    $(document).on('mouseover', '.dynamicWrap', function() {
        console.log('test');
    });

问题是我看到'test'200次（我有200个div，dynamicWrap类）。我怎么能只处理一个我徘徊的确切div的事件呢？

Answer 1

$(document).on('DOMNodeInserted', function(e) {
    if ($(e.target).hasClass('dynamicWrap')) {
        $(e.target).mouseover(function() {
            console.log('test');
        });
    }
});

请注意，这需要在开始动态添加新div之前运行。

Answer 2

$(".dynamicWrap").one('mouseover', function() {

//Function content here.
alert("I've been hovered! Only happen once!")

}); 

Answer 3

这将在悬停时取消绑定鼠标悬停事件：

$(document).on('mouseover', '.dynamicWrap', function() {
    console.log('test');
    $(this).off('mouseover');
});