Topic: Events for tabs don't work
Good afternoon, I was trying to track the event when a tab is opened:
$('a[data-mdb-toggle="tab"]').on('shown.mdb.tab', function (e) {
console.log('shown.mdb.tab')
})
But it didn't work out for me. The console was blank when I switched tabs.
I was looking for a solution for a long time until I decided to try the same event but from bootstrap:
$('a[data-mdb-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log('shown.bs.tab')
})
And when switching tabs, the console started displaying the text "shown.bs.tab"
How do I track down why this problem is happening? Both event handlers are next to each other, they should both fire at the same time, but only the bootstrap event fires.
Expected behavior
When opening a tab, output text to the console
Actual behavior
The console is empty
Resources (screenshots, code snippets etc.)
The template has roughly the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title></title>
<link rel="stylesheet" href="/static/lib/fontawesome-free-6.4.2-web/css/all.min.css">
<link rel="stylesheet" href="/static/css/fonts.css">
<link rel="stylesheet" href="/static/lib/mdb/css/mdb.min.css"/>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
content
<script type="text/javascript" src="/static/lib/mdb/js/mdb.min.js"></script>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/js/common.js"></script>
</body>
</html>
Which version are you using? In the current version (6.4.2) both MDB and Bootstrap events are triggered. https://mdbootstrap.com/snippets/standard/kpienkowska/5730647
maksam07 commented a year ago
https://jsfiddle.net/maksam07/xd49evhp/2/
Why are only bs events triggered?
maksam07 commented a year ago
Please check this code NOT in snippet, but in any other editor. Because for some reason my code in snippet seems to work without any problem, but in jsfiddle it doesn't
Kamila Pieńkowska staff commented a year ago
That's not a problem with MDB but with jsfiddle. Locally or in Codepen everything works. https://codepen.io/kpienkowska/pen/mdvyXEp
maksam07 commented a year ago
I noticed some bug in my development, I apologize for wasting my time, but you have motivated me to do more tests. Thank you.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.4.2
- Device: PC
- Browser: Chrome
- OS: Kubuntu
- Provided sample code: No
- Provided link: No