Bootstrap show.bs.modal event not working on Firefox

Question

I'm using bootstrap event to be triggered once the modal dialog is showed. Everything works like a charm on Chrome, but in Firefox the event never triggers. My Firefox version is 38.05. This is my code:

    $(document).on('show.bs.modal', function () {
        $(elementEvents).each(function( i, event ) {
            console.log("binding event index " + i +" for  type " + event.type);
            currentElement.bind(event.type,event);
        });
    });

If I change this line

   $(document).on('show.bs.modal', function () {

By this one works

    $("*").on('show.bs.modal', function () {

Any idea why Firefox doesn't interpret the document?

Solution 1

You have to bind the event to the actual modal.

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
});

and this is a working example.

Or you can bind it to the class:

$('.modal').on('show.bs.modal', function (event) {
    alert('here I am!');
    console.log(event);
});

$('.modal').on('hidden.bs.modal', function (event) {
    alert('bye bye!');
    console.log(event);
});

As shown in this jsFiddle.

Solution 2

I just had this issue... I moved the code inside a jQuery(document).ready() and it's now working for me.

jQuery(document).ready(function () {
    jQuery('.modal').on('hidden.bs.modal', function (e) {
        // whatever you want to do
    });
});

Comments

[paul]

It´s a generic js for all modal dialogs, so no possible. Unless of course that I use the modal class, you gave me an idea, thanks!

[paul]

nope, with modal it´s not working neither $(".modal").on('hidden.bs.modal', function ()

[LeftyX]

There must be something else in your code cause it does work.

[paul]

Yes, problem is that some dialogs are load from the server when the trigger to open is throw, but my generic js is run when the page is render, so at that point the modal is not in the DOM already. My best approach so far is use delegate $("*").delegate('.modal','hidden.bs.modal', function () {

[Anant - Alive to die]

helpful for me.+1