show.bs.modal не будет запускаться во внешне загруженном модале начальной загрузки 4 - PullRequest
Новая
       7

show.bs.modal не будет запускаться во внешне загруженном модале начальной загрузки 4

0 голосов
/ 08 ноября 2018

Я бы хотел иметь возможность загружать обычный модальный диалог (который хранится во внешнем файле) на любую страницу, которой требуется модал как часть страницы. Кажется, что это в основном работает, за исключением того, что ни события show.bs.modal, ни hide.bs.modal не запускаются, когда модальная разметка загружается из внешнего файла. Тем не менее, события запускаются нормально, если я закомментирую загрузку внешней html и просто скопируйте разметку внешних файлов прямо в тело страницы.

На странице (index.html), которая загружает модальную разметку и затем отображает ее, у меня есть следующая разметка. 

<body>
    <button type="button" class="btn" data-toggle="modal" 
        data-target="#simpleModalDialog" >
         open External Modal
    </button>

    <div id="externalModal" />

    <script>
        $(document).ready(function(){
            $('#externalModal').load('modal_dialog_simple.html');
            // setup handlers
            $('#simpleModalDialog').on('show.bs.modal',function(){
                console.log('show bs modal event triggered');
            });
            $('#simpleModalDialog').on('hide.bs.modal', function(){
                console.log('hide bs modal event triggered.');
            });
        });
    </script>
</body>

во внешнем файле modal_dialog_simple.html разметка выглядит следующим образом: 

<div class="modal fade" id="simpleModalDialog">
    <div class="modal-dialog modal-dialog-centered" >
        <div class="modal-content">            
            <div class="modal-header">
                <h4 id="modal_heading" class="modal-title">
                    Simple Modal Heading
                </h4>
                <button id="modal_close_button" type="button" 
                    class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <input type="text" value="test" id="message"/>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn">Submit</button>
                <button type="button" class="btn btn-secondary" 
                    data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Заранее спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

ни события show.bs.modal, ни hide.bs.modal не запускаются, когда модальная разметка загружается из внешнего файла

simpleModalDialog еще не загружен, когда вы присоединяете обработчик событий. Вы можете использовать делегирование события или обратный вызов загрузки complete jQuery. Используя делегирование событий, вы можете написать: 

$('#externalModal').on('show.bs.modal', '#simpleModalDialog', function(){
      console.log('show bs modal event triggered');
});
$('#externalModal').on('hide.bs.modal', '#simpleModalDialog', function(){
      console.log('hide bs modal event triggered.');
});

Другой возможностью является всплывающее сообщение в случае отсутствия stopPropagation . Таким образом, вы можете прикрепить обработчик событий непосредственно к externalModal parent: 

 $('#externalModal').on('show.bs.modal', function(){
      console.log('show bs modal event triggered');
});
$('#externalModal').on('hide.bs.modal', function(){
      console.log('hide bs modal event triggered.');
});
0 голосов
/ 08 ноября 2018

Вы добавляете прослушиватели событий show.bs.modal и hide.bs.modal до загрузки модального HTML.

Используйте функцию обратного вызова в методе jQuery .load , чтобы убедиться, что модальный HTML был загружен, а затем установите прослушиватели событий. 

$(document).ready(function(){
    $('#externalModal').load('modal_dialog_simple.html', function() {

        // setup handlers
        $('#simpleModalDialog').on('show.bs.modal', function() {
            console.log('show bs modal event triggered');
        });
        $('#simpleModalDialog').on('hide.bs.modal', function() {
            console.log('hide bs modal event triggered.');
        });
    });
});
...