Javascript not working with elements inside modal

Question

I need help.

With bootstrap 3 I made a modal with little form to let administrators/users change the user's password.

I've tried to made the same with bootstrap 4, but I am not be able to execute javascript triggered from anchors or buttons that are inside a modal.

Can you help me??

Example that not working:

$('.classFromElement').on('click', function (e) {
    e.preventDefault();

    alert('hello world');
});

Answer 1

The modal is probably a dynamically added html element. So it is not part of the DOM yet. You have to go around (delegate the event) via "document" or "html, body" for new elements that are added after window load. I prefer to use "document" because I had times that even the html or body element wasn't even rendered yet + it has a better performance.

Best option and best performance

$(document).on('click','.classFromElement', function(e) {
    e.preventDefault();

    alert('hello world');
});

OR... Use 'body, html' (Why both? For browser support, they back each other up)

$('body, html').on('click','.classFromElement', function(e) {
    e.preventDefault();

    alert('hello world');
});