bootstrap jquery show.bs.modal event won't fire

前端 未结 19 2280
小蘑菇
小蘑菇 2020-11-28 07:29

i\'m using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i\'m just trying:



        
相关标签:
19条回答
  • 2020-11-28 07:46

    use this:

    $(document).on('show.bs.modal','#myModal', function () {
      alert('hi');
    })
    
    0 讨论(0)
  • 2020-11-28 07:51

    Remember to put the script after the call of "js/bootstrap", not before.

    0 讨论(0)
  • 2020-11-28 07:56

    In my case, I was missing the .modal-dialog div

    Doesn't fire event: shown.bs.modal

    <div id="loadingModal" class="modal fade">
      <p>Loading...</p>
    </div>
    

    Does fire event: shown.bs.modal

    <div id="loadingModal" class="modal fade">
      <div class="modal-dialog">      
        <p>Loading...</p>
      </div>
    </div>
    
    0 讨论(0)
  • 2020-11-28 07:56

    Had the same issue. For me it was that i loaded jquery twice in this order:

    1. Loaded jQuery
    2. Loaded Bootstrap
    3. Loaded jQuery again

    When jQuery was loaded the second time it somehow broke the references to bootstrap and the modal opened but the on('shown.bs..') method never fired.

    0 讨论(0)
  • 2020-11-28 07:58

    Make sure you put your on('shown.bs.modal') before instantiating the modal to pop up

    $("#myModal").on("shown.bs.modal", function () { 
        alert('Hi');
    });
    $("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
    

    or

    $("#myModal").on("shown.bs.modal", function () { 
        alert('Hi');
    }).modal('show');
    

    To focus on a field, it is better to use the shown.bs.modal in stead of show.bs.modal but maybe for other reasons you want to hide something the the background or set something right before the modal starts showing, use the show.bs.modal function.

    0 讨论(0)
  • 2020-11-28 07:58

    i used jQuery's event delegation /bubbling... that worked for me. See below:

    $(document).on('click', '#btnSubmit', function () {
                    alert('hi loo');
                })
    

    very good info too: https://learn.jquery.com/events/event-delegation/

    0 讨论(0)
提交回复
热议问题