javascript - bootstrap 3 modal - javascript 多次可用

Question

我正在使用带有远程源的 bootstrap 3 模态对话框。我的问题是我在这些远程资源中使用了外部 JavaScript 和脚本 block 。当我打开和关闭模式对话框然后重新打开它时，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 -->

Answer 1

您可以使用另一个data- 属性来检查它是否已加载:

将 isloaded="false" 添加到您的 anchor 标记中，如下所示:

<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');
        <b>if (!$this.data('isloaded')) {</b>
            if(remote) {
                $($this.data('remote-target')).load(remote);
                <b>$this.data('isloaded', true)</b>
            }
        }
    });
});

jsFiddle

---

更新以根据评论进行澄清

来自 custom data attributes 上的 HTML5 规范:

Every HTML element may have any number of custom data attributes specified, with any value.

即没有预定义的data-isloaded，就像没有预定义的data-load-remote一样。您可以轻松地将其称为 data-kylePromisesTheValueIsLoaded。只要那是你传递给 .data() 的字符串方法，然后它将读取/写入该属性的值。