Topic: Modal "show.mdb.modal" event firing twice
Ramognee Technologies priority asked 6 months ago
The event is firing twice on "show.mdb.modal"
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-modal-init
data-mdb-target="#exampleModal">
Demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-ripple-init
data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
Javascript:
const modalInstance = new mdb.Modal(document.getElementById('exampleModal'));
modalInstance._element.addEventListener("show.mdb.modal", () => {
console.log("Show modal");
});
Output:"Show modal" is showing two time in console
Snippet: - https://mdbootstrap.com/snippets/standard/mdbootramognee-com/6133664
Kamila Pieńkowska staff answered 6 months ago
You are doing double init on modal so it fires show event twice. I've fixed your snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/6133804
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.0
- Device: Laptop
- Browser: Chrome
- OS: Kubuntu
- Provided sample code: No
- Provided link: Yes