我正在使用引導程序3模式對話框與遠程源。我的問題是我在這些遠程源中使用外部JavaScript和腳本塊。當我打開並關閉模式對話框然後重新打開它時，JavaScript會加載兩次。bootstrap 3 modal - javascript可用多次

如何禁止在重新打開模式對話框時再次加載相同的JavaScript文件？或者在關閉對話框時如何銷燬加載的JavaScript？

的JavaScript：

$(function() { 
    $('[data-load-remote]').on('click',function(e) { 
     e.preventDefault(); 
     var $this = $(this); 
     var remote = $this.data('load-remote'); 
     if(remote) { 
      $($this.data('remote-target')).load(remote); 
     } 
    }); 
});

HTML：

<a href="#myModal" role="button" class="btn" data-toggle="modal" 
    data-load-remote="http://localhost/dashboard/myprices" 
    data-remote-target="#myModal .modal-body">My Salon (Preview)</a> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" 
       aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

來源

2013-11-14 user1857519

您可以使用另一種data-屬性來檢查它是否已載入與否：

添加isloaded="false"到您的錨標記像這樣：

<a data-isloaded="false" href="#myModal" role="button" class="btn" data-toggle="modal" 
    data-load-remote="http://localhost/dashboard/myprices" 
    data-remote-target="#myModal .modal-body">My Salon (Preview)</a>

然後你可以檢查它是否使用$this.data('isloaded')加載。如果有，離開那裏，如果沒有，加載它並設置標誌如下：$this.data('isloaded', true)。

下面是一些JavaScript

$(function() { 
    $('[data-load-remote]').on('click',function(e) { 
     e.preventDefault(); 
     var $this = $(this); 
     var remote = $this.data('load-remote'); 
     if (!$this.data('isloaded')) { 
      if(remote) { 
       $($this.data('remote-target')).load(remote); 
       $this.data('isloaded', true) 
      } 
     } 
    }); 
});

jsFiddle

基於評論

從HTML5規範澄清UPDATE上custom data attributes：

每個HTML元素可能具有任何數量的自定義數據屬性指定具有任何值。

即沒有預定義的data-isloaded，與沒有預定義的data-load-remote相同。你可以簡單地稱它爲data-kylePromisesTheValueIsLoaded。只要這是您傳遞給.data()方法的字符串，那麼它將讀取/寫入該屬性的值。

來源

2013-11-14 21:13:00 KyleMit

感謝您的回答，我不是意識到data-isloaded屬性！但我忘了一點提及。我有兩個不同的遠程來源，其中包括相同的外部js文件！我無法在主頁面中嵌入外部js（因此它可用於兩個遠程源）因性能原因！是否有可能銷燬加載的JavaScript？或從DOM中刪除它？謝謝！ – user1857519

bootstrap 3 modal - javascript可用多次

回答

jsFiddle

相關問題