Проблема с очисткой таймера в JS

Question

У меня есть некоторые элементы, которые динамически создаются с использованием PHP. Я хочу, чтобы пользователь наводил курсор на значок и соответствующий элемент для отображения. Когда мышь покидает значок, я хочу запустить таймер, а затем скрыть элемент. Если мышь входит в указанный элемент, я хочу очистить таймер. Когда мышь покидает этот элемент, я хочу, чтобы таймер начал снова.

Мне трудно понять это, и я не могу понять, почему таймер не убирается. Все jQuery ниже находятся в пределах document.ready.

JQuery

var $infoIcon = $('.fa-info-circle'); 
var $trackListing = $('track-listing'); 
var timer; 

// Show listing on hover 
$infoIcon.on('mouseenter', function(){ 
    $(this).next('.track-listing').fadeIn(); 
    clearTimeout(timer); 

// Start timer when exiting the info icon 
}).on('mouseleave', function(){ 
    timer = setTimeout(function(){ 
     $('.track-listing').fadeOut(); 
    }, 2000); 
}); 

// Kill timer when entering listing box 
$trackListing.on('mouseenter', function(){ 
    clearTimeout(timer); 

// Start timer when leaving listing box  
}).on('mouseleave', function(){ 
    timer = setTimeout(function(){ 
     $('.track-listing').fadeOut(); 
    }, 2000); 
}); 

Если вам нужен PHP, дайте мне знать. Кроме того, я попытался поместить var timer; за пределы document.ready в качестве глобальной переменной, и получаю те же результаты.

Answer 1

При вставке элементов после загрузки страницы, попытаться связать их как это:

$(document).on(event, '.selector', function(){}); 

Это delegatesevent.

Answer 2

Попробуйте использовать два разных таймера. Один для $trackListing и другой для $infoIcon