JQuery парить AJAX загружен контент не работает

Question

я получаю содержание хотя AJAX, как:

<div class="nachricht" id="1"> 
    bla 
    <div class="detail" id="1" style="float: left; display: none;">hidden stuff</div> 
    <div class="spacer" style="clear: both;"></div> 
</div> 

и я хочу .details быть показано при наведении курсора мыши на .nachricht

поэтому я использую:

$(".nachricht").hover(function(){ 
    $(".detail", this).stop(true,true).delay(500).show(0); 
    }, function(){ 
    $(".detail", this).stop(true,true).delay(500).hide(0); 
}); 

Почему он не работает при загрузке, хотя AJAX и как я могу его решить?

EDIT:

Я получаю содержание от функций, как:

function loadfile(){ 
    $.ajax({ 
     type: 'post', 
     url: 'donachrichten.php', 
     data: {mach: "loadfile", kontaktfile: kontaktfile}, 
     success: function(data){ 
      $("#chatnow").html(data); 
     } 
    }); 
} 

Answer 1

Вы можете попробовать с помощью этого:

$("#chatnow").on('mouseenter', '.nachricht', function(event) { 
    $(".detail", this).stop(true,true).delay(500).show(0); 
}).on('mouseleave', '.nachricht', function(event) { 
    $(".detail", this).stop(true,true).delay(500).hide(0); 
}); 

объяснение

В .nachricht Элемент класса не существует, когда ваша страница загружена, вы не можете связать событие с несуществующим элементом. вместо этого следует использовать делегирование делегирования на элементе #chatnow.

Here are some more example of hover event delegation

Answer 2

Почему бы не справиться с показать/скрыть с помощью CSS вместо этого? Сначала удалите встроенные стили из div .detail, а затем добавьте это в таблицу стилей.

.detail {float:left;display:none} 
.nachricht:hover .detail {display:block;} 

В противном случае оберните начальную функцию наведения в функции.

function showDetails(){ 
$(".nachricht").hover(function(){ 
    $(".detail", this).stop(true,true).delay(500).show(0); 
}, function(){ 
    $(".detail", this).stop(true,true).delay(500).hide(0); 
}); 
} 

и называть его после того, как данные были загружены.

success: function(data){ 
     $("#chatnow").html(data); 
     showDetails(); 
    }