Enable tabbable list item via JavaScript (each list item needs to be activated individually):
```js
-$('#myList a').on('click', function (e) {
- e.preventDefault()
+$('#myList a').on('click', function (event) {
+ event.preventDefault()
$(this).tab('show')
})
```
</table>
```js
-$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
- e.target // newly activated tab
- e.relatedTarget // previous active tab
+$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
+ event.target // newly activated tab
+ event.relatedTarget // previous active tab
})
```
</table>
```js
-$('#myModal').on('hidden.bs.modal', function (e) {
+$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})
```
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
```js
-$('#myTab a').on('click', function (e) {
- e.preventDefault()
+$('#myTab a').on('click', function (event) {
+ event.preventDefault()
$(this).tab('show')
})
```
</table>
```js
-$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
- e.target // newly activated tab
- e.relatedTarget // previous active tab
+$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+ event.target // newly activated tab
+ event.relatedTarget // previous active tab
})
```
All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`.
```js
-$('#myModal').on('show.bs.modal', function (e) {
+$('#myModal').on('show.bs.modal', function (event) {
if (!data) {
- return e.preventDefault() // stops modal from being shown
+ return event.preventDefault() // stops modal from being shown
}
})
```
In order to execute an action once the transition is complete, you can listen to the corresponding event.
```js
-$('#myCollapse').on('shown.bs.collapse', function (e) {
+$('#myCollapse').on('shown.bs.collapse', function (event) {
// Action to execute once the collapsible area is expanded
})
```
In addition a method call on a **transitioning component will be ignored**.
```js
-$('#myCarousel').on('slid.bs.carousel', function (e) {
+$('#myCarousel').on('slid.bs.carousel', function (event) {
$('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})