Question

我对ajax回调有一些问题，我希望能得到一些帮助。基本上，这个脚本用archive.php替换#inbox div（通常会生成消息和匹配模态，但为了简单起见，我只包括泛型模态）。

关闭模式时会触发ajax回调。它目前返回模态ID。但是，这只能工作一次 - 这就是我遇到问题的地方。问题似乎在于jQuery html命令。我用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>

PHP（archive.php）：

<?php echo $_POST['message_id']; // I've also used SQL inserts, which work fine when I'm not using the jQuery HTML command ?>

<!-- Modal 1 -->

<a href="#modalOne" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="modalOne" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<!-- Modal 2 -->
<a href="#modalTwo" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="modalTwo" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<!-- Modal 3 (etc...) -->

Answer 1

运行时：

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

它找到当前的'#inbox .modal'个对象，并将事件处理程序绑定到它们。

然后你这样做：

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

它将这些DOM对象替换为新对象，并且您不再在这些新对象上激活任何事件处理程序。

您有两种选择来解决它：

您可以使用委托事件处理，该处理适用于动态创建的对象。
您可以在替换HTML后重新绑定事件处理程序。

我不知道您正在使用的hidden事件，但如果它适用于委派事件处理，那么您可以更改为使用委托事件处理：

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

此处，事件绑定到未重新创建的#inbox对象，然后检查冒泡的事件以查看它们是否源自.modal对象。这就是委托事件处理的工作方式，它适用于在父对象上安装事件处理程序后动态创建的子对象。

Answer 2

您已将事件绑定到$('#inbox .modal')，因此当您使用$('#inbox').html(data)替换内容时，您还要删除（替换）事件绑定的元素。而是尝试$('#inbox').on('hidden', '.modal', function() {来绑定您的活动。

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

2 个答案: