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 ver ...） 在底部刷新之后（相同的类，相同的id）：

我希望你们能提供帮助。感谢!!!

Answer 1

当您致电.load()时，您将使用没有任何事件处理程序的新元素替换现有元素。

您需要使用子选择器添加事件处理程序using .on()，以处理与选择器匹配的所有未来元素的事件。