Geek Answers Handbook

Disable bootstrap data attributes API?

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

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

I thought it was really cool for some cases where other javascripts use the same data attributes. You only need to disable bootstrap-API in a special area.

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 that did not work.

There is still a clickEvent for modal. Can someone tell me what I did wrong?

It does not work for $('#clickBtn').off('.data-api'); .

+4
source share
3 answers

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

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

Of course you cannot disable api with

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

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

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

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

The download documentation seems a bit confusing ...

+4
source

The following code does not work:

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

You can disable individual plugins like this.

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

Elements are not html.

However, you can override the problems caused by bootstrap data attributes that contradict data attributes from other scripts using jQuery. Using the link example, the following task is performed in which the links become fuzzy with an element that has data attributes from a script that is not a plug-in for bootstrapping:

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

If you want to use the Bootstrap api data only in a specific part of your DOM tree, you can try moving the event handlers to another, common ancestor (s). This code works very well for me, but consider - as stated here - This approach uses the jQuery undocumented function to retrieve the event handlers assigned by the 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 ); }); });

Now you can disable the default api data and enable it with some class name. Remember that you do not need to insert these elements. All events are bubbling, therefore - upon attachment - the same event handler is called several 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>
0
source

More articles:


All Articles