JQuery .load отключает все функции

Question

С Рождеством! У меня есть персональная система сообщений на моей странице. Чтобы показывать и обрабатывать сообщения, я использую jquery. Это файл, о котором я хочу поговорить:

<!-- get the message and show it --> 
<script type="text/javascript"> 
$('.message').click(function() { 
    var msgId = $(this).attr('id').replace('msg',''); 
    $.get('retrieve_msg_content.php?msgID='+msgId,function(data) { 
     $('#target').html(data); 
    }) 
// change status to read (1). type: 'POST', 
$.ajax({ type: 'POST', url: 'change_status.php', data: "msgID="+msgId+"&action=read", }); 
}); 

// if img X is clicked, change status to erased(3)! 
$('.delete_msg').click(function() { 
    var msgId = $(this).attr('id').replace('msg',''); 
$.ajax({ 
    type: 'POST', url: 'change_status.php', data: "msgID="+msgId+"&action=delete", 
    success: function(){ 
$('#message_line'+msgId).hide('slow'); 
$('#target').html('Haz click en un mensaje para leerlo!'); 

$('#refresh').load("retrieve_msg_received.php"); 
} 
}); 
}); 
</script> 
<!-- END of get the message and show it --> 

<div id="refresh"> 
<?php include 'retrieve_msg_received.php'; ?> 
</div> 

<span id="target"></span> 

Позвольте мне объяснить сейчас. Первый раздел: когда вы нажимаете на сообщение, он вызывает retrieve_msg_content.php, заменяет содержимое сообщения в #target, а затем он изменяет статус на «1» (чтение). Второй раздел - удалить сообщение: он изменяет статус сообщения на «3», затем он скрывает только что стертое сообщение, помещает что-то приятное в #target и перезагружает список сообщений. Все работает нормально, пока вы не попытаетесь прочитать другое сообщение после перезагрузки сообщений. По какой-то причине вы щелкаете в любом сообщении, но оно не отображается, и я не вижу никаких действий (никаких вызовов на другие файлы -retrieve_msg_content.php). Проверяя элементы, которые я могу видеть, что они похожи друг на друга до и после «обновления»

перед обновлением (сверху), вы можете увидеть #target (A вер ...) после обновления на дне (тот же класс, тот же идентификатор):

Надеюсь, вы, ребята, можете помочь. Благодаря!!!

Answer 1

Когда вы вызываете .load(), вы заменяете существующие элементы новыми элементами, у которых нет обработчиков событий.

Необходимо добавить обработчики событий using .on() с дочерним селектором для обработки событий для всех будущих элементов, соответствующих селекторам.