4

ブートストラップのドキュメントによると、次のコードを使用してデータAPIを簡単に無効にできます。

$('body').off('.data-api');

他のJavaScriptが同じデータ属性を使用している場合、それは本当にクールだと思いました。特別なリージョンでブートストラップAPIを無効にするだけです。

たとえば、各a-TagでAPIを無効にします。

<html>
  <head>
    <title>Bootstrap - Test - Disable The API</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function() {
        //This is working: $(document).off('.data-api');

        //This is not working:
        $('a').off('.data-api');
      });
    </script>
  </head>
  <body>

    <!-- Button to open the modal -->
    <a id="clickBtn" href="#myModal" data-toggle="modal">Launch demo modal</a>

    <!-- Modal -->
    <div id="myModal" class="modal hide fade">
      This is just a little test
    </div>

  </body>
</html>

しかし、それはうまくいきませんでした。

clickEventモーダルにはまだあります。誰かが私が間違ったことを教えてもらえますか？

どちらも機能していません$('#clickBtn').off('.data-api');。

4

3 に答える 3

4

わかりました、私は自分で問題を解決したと思います。Bootstrap は、イベント ハンドラーをドキュメント ルートにアタッチします。

  $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
      ...
  })

もちろん、APIを無効にすることはできません

$('body').off('.data-api');また$('#clickBtn').off('.data-api');

ハンドラーは、本文や要素自体ではなく、ドキュメント ルートにアタッチされているためです。

特別な要素 (私の例では a-Tag) の API を無効にする場合は、オフメソッドからセレクターパラメーターを定義する必要があります。

$(document).off('.data-api','a');

ブートストラップのドキュメントは少し混乱しているようです...

于 2013-02-16T10:08:56.393 に答える
1

Bootstrap のデータ API を DOM ツリーの特定の部分でのみ使用したい場合は、イベント ハンドラーを他の共通の祖先に移動してみてください。このコードは私にとってはかなりうまく機能しますが、注意してください-ここで述べたように-このアプローチは、文書化されていないjQuery機能を使用して、 objectに割り当てられたイベントハンドラーをフェッチしdocumentます。

function moveBootstrapEventHandlersTo(target) {
    /* undocumented jQuery feature below */
    var eventHandlers = $._data(document, "events");

    $.each(eventHandlers, function() {
        $.each(this, function() {
            $(target).on(
                this.origType + "." + this.namespace,
                this.selector,
                this.data,
                this.handler
            );
    });
});

デフォルトでデータ API を無効にし、クラス名で有効にできるようになりました。これらの要素を入れ子にしないでください。すべてのイベントはバブリングするため、ネストされている場合、同じイベント ハンドラーが複数回呼び出されます。

<body>
    <div class="with-bs-data-api">
        // bootstrap data api works here
    </div>
    <div class="some-other-class">
        // but doesn't work here
    </div>
    <footer>
        <div class="with-bs-data-api">
            // and here it works again
        </div>
    </footer>
    <script type="text/javascript">
        moveBootstrapEventHandlersTo(".with-bs-data-api");
        $(document).off('.data-api');
    </script>
</body>
于 2016-06-19T11:48:18.723 に答える