Я пытаюсь передать идентификатор элемента в модальное диалоговое окно. Однако мероприятие не уволили. Я посмотрел на событие начальной загрузки jquery show.bs.modal не сработает но это не помогло. Вот что я делаю.

Я строю набор ссылок следующим образом.

// invitations is an array of id's retrieved from the back-end
for (var i = 0; i < invitations.length; i++) {
   var labelTxt = '<label><a href="#" data-toggle="modal" id=' + invitations[i] + ' data-target="#modalInvitation">' +  invitations[i] + '</a></label>';
   $('<div>').text($(labelTxt).appendTo('#myDiv'));
}

Мой модальный диалог выглядит следующим образом

<div id="modalInvitation" class="modal fade" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Invite</h4>
         </div>
         <div class="modal-body">
            <button id="inviteBtn" type="button" class="btn btn-primary" data-dismiss="modal">Invite</button>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn" data-dismiss="modal">Cancel</button>
         </div>
      </div>
   </div>
</div>

Наконец, я вызываю событие show.bs.modal следующим образом.

<script type="text/javascript">
$(function() {
    $(document).on('show.bs.modal',
        '#modalInvitation',
        function() {
            var inviteId = e.relatedTarget.id;
            alert(inviteId);
        });
});

Однако событие show.bs.modal не запускается. Также упоминалось об этом Отправить параметр в модальное окно Bootstrap?

1
Redzon 12 Ноя 2017 в 03:45

1 ответ

Лучший ответ

Что ж, с кодом все в порядке. Сокращая код до минимума, я заметил, что у меня работает 2 версии jQuery, вот так

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Удаление последнего решает проблему. Проблема все еще существует, если я использую только последнее. Не знаю почему.

3
Redzon 14 Ноя 2017 в 02:23