0

我在使用 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（存档.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…&lt;/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…&lt;/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...) -->
4

2 回答 2

1

当你运行这个：

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

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

当你这样做时：

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

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

您有两种选择来修复它：

  1. 您可以使用与动态创建的对象一起使用的委托事件处理。
  2. 您可以在替换 HTML 后重新绑定事件处理程序。

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

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

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

于 2013-04-12T02:50:37.533 回答
1

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

于 2013-04-12T02:51:17.367 回答