Php ajax成功函数（使用html方法）只触发一次

我在ajax回调方面遇到了一些问题，我希望能得到一些帮助。基本上，这个脚本将#inbox div替换为archive.php（通常会生成消息和匹配的modal，但为了简单起见，我只包含了一般modal）

当您关闭模式时，会触发ajax回调。它当前返回modals ID。然而，这只工作一次-这就是我遇到的问题。问题似乎在于jqueryhtml命令。我已经用alert（id）替换了它，脚本将运行任意次数。有什么建议吗？如果我需要进一步澄清，请告诉我。谢谢

HTML/JavaScript：

<div id="inbox"> <!-- Content should be put between this div -->
      <?php include_once('archive.php'); ?>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#inbox .modal').on('hidden', function() {
      id = $(this).attr('id');
        $.ajax({
          type: "POST",
          url: "archive.php",
          data: {message_id : id},
          cache: false,
          success: function(data) {
            $('#inbox').html(data); // problem is here
          }
        });
    });
  });
</script>

$（文档）.ready（函数（）{
$（'#inbox.modal'）。在（'hidden'，function（）上{
id=$（this.attr（'id'）；
$.ajax({
类型：“POST”，
url:“archive.php”，
数据：{message_id:id}，
cache:false，
成功：功能（数据）{
$（“#收件箱”）.html（数据）；//问题就在这里
}
});
});
});

PHP（archive.PHP）：

×
模态头
一个好身体

接近
保存更改
×
模态头
一个好身体

接近
保存更改

运行此操作时：

$('#inbox .modal').on('hidden', function() {

它查找当前的

“#inbox.modal”

对象，并将事件处理程序绑定到它们

当你这样做时：

$('#inbox').html(data);

它用新的DOM对象替换这些DOM对象，并且在这些新对象上不再有任何活动的事件处理程序

您有两种选择来修复它：

您可以使用委托事件处理，它可以处理动态创建的对象

替换HTML后，可以重新绑定事件处理程序

我不知道您正在使用的

隐藏的
事件，但如果它与委派事件处理一起工作，则您可以更改为使用委派事件处理：

$('#inbox').on('hidden', '.modal', function() {

在这里，事件绑定到未重新创建的
#inbox
对象，然后检查冒泡的事件，查看它们是否起源于
.modal
对象。这就是委派事件处理的工作方式，它与在父对象上安装事件处理程序后动态创建的子对象一起工作。
您已将事件绑定到
$（'#inbox.modal'）
，因此当您将内容替换为
$（'#inbox'）.html（数据）
时，您也将删除（替换）事件绑定到的元素。相反，尝试使用（'hidden'，'.modal'，function（）{
绑定事件

$('#inbox').on('hidden', '.modal', function() {