Disable the bootstrap data attribute API?

Question

The bootstrap documentation says, you can easily disable the data API with following code:

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

I thought that's really cool for some cases, when other javascripts are using the same data-attributes. You only have to disable the bootstrap-API in the special region.

For example disabling the API in each a-Tag:

<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>

But it didn't work.

There is still a clickEvent for the modal. Can anybody tell me what I have done wrong?

It's not working for $('#clickBtn').off('.data-api'); either.

score 4 · Answer 1 · answered Feb 16 '13 at 10:08

Okay, I think I solved the problem by myself. Bootstrap attaches the event handlers to the document-root:

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

Of course you can't disable the api with

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

because the handler is attached to the document root and not to the body or to the element itself.

If you want to disable the API for a special element (in my example the a-Tag), you have to define the selector-parameter from the off-method:

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

It seems the bootstrap-documentation is a little bit confusing...

score 1 · Answer 2 · edited Apr 04 '14 at 01:06

The following code doesn't work:

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

You can only disable individual plugins like this.

e.g. $(document).off('.modal.data-api');

Not html elements.

However, you can override problems caused bootstrap data attributes conflicting with data attributes from other scripts with jQuery. Using your link example, the following does the job where links become unclickable with an element that has data attributes from a script that is not a bootstrap plugin:

$('.selected-areas a').filter('[href]').click(function(){
    window.location.href = $(this).attr('href');
});

score 1 · Answer 3 · edited May 23 '17 at 10:33

If you want to use Bootstrap's data api only under certain part of your DOM tree, you can try to move event handlers to some other, common ancestor(s). This code works pretty well for me, but please note - as stated here - this approach uses undocumented jQuery feature to fetch event handlers assigned to document object.

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
            );
    });
});

You can now disable data api by default and enable it with some class name. Remember not to nest those elements. All events are bubbling, so - when nested - the same event handler gets called multiple times.

<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>

Disable the bootstrap data attribute API?

3 Answers3