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，并且绑定的事件只会触发一次。