Получить модальные начальные данные Bootstrap-* при закрытии

Когда модальный режим начальной загрузки показывая можно легко получить связанные данные, используя такой код, как

$('#myModal').on('show.bs.modal', function (e) {
   var id = $(e.relatedTarget).data('id'); 
   alert(id);
}

Возможно ли то же самое при модальном режиме загрузки закрытие?
Особенно при закрытии определенной кнопкой (т.е. кнопкой подтверждения, а не любой из кнопок отмены)? Кажется, что relatedTarget недоступен ни в одном button внутри модального окна, ни в событии hidden.bs.modal.
На следующей игровой площадке значение атрибута data-id должно отображаться под кнопками удаления, когда modal нажимается «да» аналогичным образом data-id отображается модальное тело:

$(document).ready(function () {
  $('#deleteModal').on('show.bs.modal', function (e) {
      $('#testOutput,#testOutput2').text('');
       var id = $(e.relatedTarget).data('id'); 
    $('#deleteId').text(id || 'id retrieval failed');
  });
  
  $('#deleteModal').on('hidden.bs.modal', function (e) {
      var id = $(e.relatedTarget).data('id'); //does not work
      $('#testOutput2').text(id || '"hidden.bs.modal" id retrieval failed');
  });  
  
  $('#confirmDeleteBtn').click(function (e) {
    var id = $(e.relatedTarget).data('id');  //does not work
    //var id = $(this).closest('.modal').data('id'); //doesnt work neither
    $('#testOutput').text(id || '"btn.close .modal" id retrieval failed');
  });
});

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
<div class = "col offset-3">
  <div class = "d-flex">
    <button class = "mt-4 btn btn-primary" data-toggle = "modal" data-target = "#deleteModal" data-id = "42">delete record 1</button>
    <button class = "mt-4 btn btn-primary" data-toggle = "modal" data-target = "#deleteModal" data-id = "123">delete record 2</button>
  </div>
  <h5 class = "mt-4 text-danger" id = "testOutput"></h5>
  <h5 class = "text-danger" id = "testOutput2"></h5>
</div>
<div class = "modal fade" id = "deleteModal" tabindex = "-1" role = "dialog" aria-labelledby = "deleteModalTitle" aria-hidden = "true">
    <div class = "modal-dialog modal-dialog-centered" role = "document">
        <div class = "modal-content">
          <div class = "modal-header">
            <h5 class = "modal-title" id = "deleteModalTitle">Confirm delete</h5>
            <button type = "button" class = "close" data-dismiss = "modal">
              <span aria-hidden = "true">&times;</span>
            </button>
          </div>
          <div class = "modal-body">
            <p>Delete record <span class = "font-weight-bold text-danger" id='deleteId'></span>?</p>
          </div>
          <div class = "modal-footer">
            <button class = "btn btn-primary" type = "button" id = "confirmDeleteBtn" data-dismiss = "modal">Yes</button>
            <button class = "btn btn-outline-secondary" id = "cancelDeleteBtn"type = "button" data-dismiss = "modal">Cancel</button>
          </div>
        </div>
    </div>
</div>

обратите внимание, что id открытия button не является постоянным, т. е. существует множество удалений button, способных открыть один диалог.

@freedomn-m должен признать, что его можно рассматривать неоднозначно, однако получение значения атрибута из элемента html было бы тривиальным, поэтому я уверен, что большинство, если не все, поймут, что понимают его как неопределенный. В любом случае, не могли бы вы предложить недвусмысленное название?

— 08.04.2019 14:03

@freedomn-m ах, основная путаница здесь связана с модальный шаблон передачи данных Bootstrap. Поэтому вместо «передавать данные-> onopen-> получить данные» мне бы хотелось «передать данные-> открыть-> при закрытии-> получить данные», хотя я не уверен, как включить это в заголовок. К кнопке закрытия это никак не относится (ну разве что когда она закрывается, мне нужны ранее переданные данные).

— 08.04.2019 15:32

javascript jquery twitter-bootstrap bootstrap-4 bootstrap-modal

08.04.2019 12:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

560

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете установить атрибут data-id на скрытый input внутри вашего modal и брать id только оттуда. Попробуйте ниже код-

$(document).ready(function () {
  $('#deleteModal').on('show.bs.modal', function (e) {
      $('#testOutput,#testOutput2').text('');
       var id = $(e.relatedTarget).data('id'); 
       $('input.delete-btn-id').val(id);
    $('#deleteId').text(id || 'id retrieval failed');
  });
  
  $('#deleteModal').on('hidden.bs.modal', function (e) {
      var id = $('input.delete-btn-id').val(); //it's working now
      $('#testOutput2').text(id || '"hidden.bs.modal" id retrieval failed');
  });  
  
  $('#confirmDeleteBtn').click(function (e) {
    var id = $('input.delete-btn-id').val();  //it's working now
    $('#testOutput').text(id || '"btn.close .modal" id retrieval failed');
  });
});

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
<div class = "col offset-3">
  <div class = "d-flex">
    <button class = "mt-4 btn btn-primary" data-toggle = "modal" data-target = "#deleteModal" data-id = "42">delete record 1</button>
    <button class = "mt-4 btn btn-primary" data-toggle = "modal" data-target = "#deleteModal" data-id = "123">delete record 2</button>
  </div>
  <h5 class = "mt-4 text-danger" id = "testOutput"></h5>
  <h5 class = "text-danger" id = "testOutput2"></h5>
</div>
<div class = "modal fade" id = "deleteModal" tabindex = "-1" role = "dialog" aria-labelledby = "deleteModalTitle" aria-hidden = "true">
    <div class = "modal-dialog modal-dialog-centered" role = "document">
        <div class = "modal-content">
          <div class = "modal-header">
            <h5 class = "modal-title" id = "deleteModalTitle">Confirm delete</h5>
            <button type = "button" class = "close" data-dismiss = "modal">
              <span aria-hidden = "true">&times;</span>
            </button>
          </div>
          <div class = "modal-body">
            <p>Delete record <span class = "font-weight-bold text-danger" id='deleteId'></span>?</p>
            <input type = "hidden" val = "" class = "delete-btn-id"/>
          </div>
          <div class = "modal-footer">
            <button class = "btn btn-primary" type = "button" id = "confirmDeleteBtn" data-dismiss = "modal">Yes</button>
            <button class = "btn btn-outline-secondary" id = "cancelDeleteBtn"type = "button" data-dismiss = "modal">Cancel</button>
          </div>
        </div>
    </div>
</div>

В качестве альтернативы сохраните как .data() в модальном окне (вместо использования скрытого ввода)

— 08.04.2019 15:16

08.04.2019 12:59

Вы можете сохранить значение идентификатора во входе, скрытом, когда модальное шоу

...
<div class = "modal-body">
   <p>Delete record <span class = "font-weight-bold text-danger" id='deleteId'></span>?</p>
   <input type='hidden' id='deleteIdInput' />
</div>
...

$('#deleteModal').on('show.bs.modal', function (e) {
  $('#testOutput,#testOutput2').text('');
  var id = $(e.relatedTarget).data('id'); 
  $('#deleteId').text(id || 'id retrieval failed');
  $('#deleteIdInput').val(id);
});

$('#deleteModal').on('hide.bs.modal', function (e) {
  var id = $('#deleteIdInput').val(); //does not work
  $('#testOutput2').text(id || '"hidden.bs.modal" id retrieval failed');
});

Это демо: https://jsbin.com/caqubagobu/

08.04.2019 13:01