Невозможно навести курсор на динамически созданный элемент div

Question

Я в настоящее время динамически генерирую row и col-xs-6 col-sm-4 внутри элемента div #locations-content.

<div id="locations-content"> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-4"><img class="img-thumbnail" src="assets/img/boston.jpg" id="Boston-img-popup"></div> 
    </div> 
</div> 

Я пытаюсь получить изображение, чтобы исчезнуть при наведении, но он, похоже, не работает. Есть ли что-то случилось с моим кодом:

$('#locations-content').on('hover', '.row > .col-xs-6.col-sm-4', function(event){ 
    $(this).find('img').fadeTo('slow', 0.4); 
    $(this).find('img').fadeTo('slow', 1); 
}); 

Answer 1

Я считаю, что вам нужно использовать MouseEnter вместо висения

$('#locations-content').on('mouseenter', '.row > .col-xs-6.col-sm-4', function(event){ 
    $(this).find('img').fadeTo('slow', 0.4); 
    $(this).find('img').fadeTo('slow', 1); 
});