发表新帖
发表新帖

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

前端 未结
关注
19 2281
小蘑菇
小蘑菇 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:59

    In my case the problem was how travelsize comment.. The order of imports between bootstrap.js and jquery. Because I'am using the template Metronic and doesn't check before

    0 讨论(0)
  • 不知归路
    2020-11-28 08:01

    Wrap your function in $(document).ready(function() {, or more simply, $(function() {. In CoffeeScript, this would look like

    $ ->
  $('#myModal').on 'show.bs.modal', (event)->

    Without it, the JavaScript is executing before the document loads, and #myModal is not part of the DOM yet. Here is the Bootstrap reference.

    0 讨论(0)
  • 悲&欢浪女
    2020-11-28 08:01

    I had a similar but different problem and still unable to work when I use $('#myModal'). I was able to get it working when I use $(window).

    My other problem is that I found that the show event would not fire if I stored my modal div html content in a javascript variable like. 

    var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
  alert('show test');
});

    the event never fired because it didn't occur

    my fix was to include the divs in the html body

    <body>
    <div id='myModal'>
       ...
    </div>
    <script>
        $('#myModal).modal();
        $(window).on('show.bs.modal', function (e) {
            alert('show test');
        });
    </script>
</body>
    0 讨论(0)
  • 死守一世寂寞
    2020-11-28 08:02

    Sometimes this doesn't work if:

    1) you have an error in the java script code before your line with $('#myModal').on('show.bs.modal'...). To troubleshoot put an alert message before the line to see if it comes up when you load the page. To resolve eliminate JSs above to see which one is the problem

    2) Another problem is if you load up the JS in wrong order. For example you can have the $('#myModal').on('show.bs.modal'...) part before you actually load JQuery.js. In that case your call will be ignored, so first in the HTML (view page source to be sure) check if the script link to JQuery is above your modal onShow call, otherwise it will be ignored. To troubleshoot put an alert inside the on show an one before. If you see the one before and not the one inside the onShow function it is clear that the function cannot execute. If the spelling is right more than likely your call to JQuery.js is not made or it is made after the onShow part

    0 讨论(0)
  • 北恋
    2020-11-28 08:03 
    $(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});
    0 讨论(0)
  • 别跟我提以往
    2020-11-28 08:03

    I had the same issue with bootstrap4. The solution was to add it inside the jQuery document ready() function:

    $(document).ready(function() {
    $('#myModal').on('show.bs.modal', function () {
       alert('hi')
    })
}
    0 讨论(0)
 看不清?
提交回复
热议问题