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...) -->

來源

2013-04-12 scruwys

當你運行這個：

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

它發現當前'#inbox .modal'對象，並結合一事件處理程序給他們。

當你然後做：

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

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

你有兩個選擇來解決它：

您可以使用委派事件處理與動態創建的對象的作品。
您可以在替換HTML後重新綁定事件處理程序。

我不知道你使用的是hidden事件，但如果它與委派事件處理工作，那麼你可以改變這種使用委託事件處理：

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

在這裏，事件綁定到#inbox對象，該對象不會被重新創建，然後它會檢查冒泡的事件以查看它們是否源自.modal對象。這就是委託事件處理的工作原理，它可以處理在父對象上安裝事件處理程序後動態創建的子對象。

來源

2013-04-12 02:50:37 jfriend00

完美地工作，謝謝！ – scruwys

你已經綁定的事件$('#inbox .modal')，所以當你與$('#inbox').html(data)更換內容也會刪除（替換），該事件被綁定到元素。請嘗試使用$('#inbox').on('hidden', '.modal', function() {來綁定您的活動。

來源

2013-04-12 02:51:17

ajax成功函數（使用html方法）只觸發一次

回答

相關問題