如何在JavaScript / jQuery中的不同div上附加多个滚动事件？

Question

我需要在滚动事件上动态加载数据，但我的数据分组在不同的表中。如果从AJAX调用返回的行数大于某个限制，则会向该表添加溢出和高度。

在文档加载时，我只获取并填充表示不同组的表标题。首次单击组标题时，会加载一个数据块（表行<tr>）并显示在页面上。

所以我需要跟踪光标是否在某个表上，而不是触发滚动事件。这是一些代码和结构：

// allGroups holds the ids of all the groups
allGroups = [435,56,34,23,452];

$(document).ready(function () {

$.each(allGroups, function(ind, value){

    var item = $('#POI_data_' + value);

    item.on('mouseenter',function(){

        item.on('scroll',function(){
            // fetch new data
        });

    });
    item.on('mouseleave', function(){

        item.off('scroll');
    });
});
});

表格结构：

<div id="POI_data_<?php echo $poiRow['id'] ?>">
    <table >
        <!-- FETCH NEW DATA -->
    </table>
</div>

我的问题是当mouseenter事件在另一个表上触发时，滚动事件没有被正确触发。