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

问题描述：

我遇到了一些Ajax回调的问题，我希望能得到一些帮助。基本上，这个脚本用archive.php替换了#inbox div（通常会生成消息和匹配模式，但为了简单起见，我只包含了通用模式）。ajax成功函数（使用html方法）只触发一次

当您关闭模式时，会触发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...) -->

答

当你运行这个：

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

它发现当前'#inbox .modal'对象，并结合一事件处理程序给他们。

当你然后做：

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

它取代那些以DOM用新的对象，你不再有那些新的对象主动任何事件处理程序。

你有两个选择来解决它：

您可以使用委派事件处理与动态创建的对象的作品。
您可以在替换HTML后重新绑定事件处理程序。

我不知道你使用的是hidden事件，但如果它与委派事件处理工作，那么你可以改变这种使用委托事件处理：

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

在这里，事件绑定到#inbox对象，该对象不会被重新创建，然后它会检查冒泡的事件以查看它们是否源自.modal对象。这就是委托事件处理的工作原理，它可以处理在父对象上安装事件处理程序后动态创建的子对象。

完美地工作，谢谢！ – scruwys

答

你已经绑定的事件$('#inbox .modal')，所以当你与$('#inbox').html(data)更换内容也会删除（替换），该事件被绑定到元素。请尝试使用$('#inbox').on('hidden', '.modal', function() {来绑定您的活动。

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

相关推荐