Twitter Bootstrap模式多個事件觸發

Question

這是一個奇怪的問題，我已經搜索了一個答案，但我找不到一個適合我的代碼。

編輯：這個問題發生在一個沉重的Ajax頁面上，頁面沒有刷新並且Modal被重用。

請注意我的JavaScript是弱了一點，所以我可能接近這個問題錯

我也發現了類似的問題here和here

兩個描述我有，但我只是更新調用視圖的問題在隱藏。我不綁定到按鈕事件。

我有多個情態動詞的定義

<div id="modal_small" class="modal hide fade in"> 
    </div> 
    <div id="modal_large" class="modal hide fade in"> 
    </div> 

我重用這些模態。因此，modal_large正在顯示一個創建表單一秒鐘，然後顯示您可以選擇的圖像列表。

我呈現每個實例

 function show_modal_large(href) { 
      $.get(href, function (data) { 
       $('#modal_large').html(data); 
       $('#modal_large').modal('show'); 
      }); 
     }; 

我的目標是重用這些模態中顯示使用下面的腳本傳遞的觀點我情態動詞。這就是問題所在，我相信

在「$（文件）。就緒」這是會顯示模式我把這個腳本綁定到情態動詞「隱藏」事件的看法

$('#modal_large').on('hidden', function() { 
       // Make Ajax Call - THIS WORKS 
    }); 

因此，您在顯示選定圖像的視圖上有一個列表。然後打開一個模式並選擇更多圖像。隱藏我更新呼叫表單上的選定圖像。

每件事情都很好。

的問題：

我第一次打開模式並關閉了「關於隱藏」事件被觸發一次。第二次我打開和關閉模式'在隱藏'事件是調用兩次，第三次三次調用等。 如果我離開並使用其他「隱藏」事件的模式，則隱藏事件將被稱爲四個次爲NEW隱藏事件，而四個次爲舊隱藏事件。一段時間後，我的系統死亡，所有的ajax調用。

我錯過了什麼？我應該如何構建我的代碼，這樣不會發生？

Answer 1

好吧，想出了這個......好樣的。希望這段代碼對其他人有用。

由於我綁定到模式的'隱藏'事件，每次創建時，我只是添加另一個綁定和另一個調用到所有以前的綁定也。

因此，要在來到這個我擺脫了舊模式聲明

<div id="modal_small" class="modal hide fade in"> 
</div> 
<div id="modal_large" class="modal hide fade in"> 
</div> 

和替代他們，我動態創建的情態動詞，因爲我需要他們像這樣和一個電話傳回了「隱藏」事件

 function show_modal_large(href, callback) { 
      // create guid to name of this Modal 
      var randomNum = guid(); 
      // create element with guid id 
      var elementName = '#' + randomNum.toString(); 
      $('body').append("<div id=" + randomNum + " class='modal hide fade in'></div>"); 
      // create Modal and show 
      $.get(href, function (data) { 
       $(elementName).html(data); 
       // register call back to 'hidden' event 
       $(elementName).on('hidden', function() { 
        callback(); 
        // clean up after hidden 
        $(elementName).unbind(); 
        $(elementName).remove(); 
       }); 
       $(elementName).modal('show'); 
      }); 
     }; 

     function s4() { 
      return Math.floor((1 + Math.random()) * 0x10000) 
         .toString(16) 
         .substring(1); 
     }; 

     function guid() { 
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
        s4() + '-' + s4() + s4() + s4(); 
     } 

我從Stackoverflow question here

這對我的作品得到了很大的GUID創建。並解決我的問題。

Answer 2

您也可以使用.one代替.on，並且綁定的事件只會觸發一次。