Как мне не показывать мой модал при каждом нажатии на него?

Question

Я сейчас добавляю модал из моего HTML в TD. В настоящее время у меня есть функция, которая показывает модал, который был добавлен, однако каждый раз, когда я нажимаю на модал, он запускает код, когда я нажимаю на ТД (он считает модал как часть ТД) и, следовательно, постоянно показываеттот же модал.

Я пробовал:

      document.addEventListener("show", function(){
      $('td').off("click");
      });

И даже:

 $(this).off("click",`#${modalId}`);

JavaScript

$('td').on('click', function(e) {

$('td').removeClass("selectedDate");
$(this).addClass("selectedDate");
var n = $(this).find('.date').text(); //selects the date input for the cell.
    let ordN = n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');

let modal= $('.modal').clone(true);
$(this).append(modal);
let modalId= `${months[currentMonth]}-${n}-${currentYear}`;
modal.attr('id',`${modalId}`);


 $(this).find('#modalHeader').text(`${months[currentMonth]} ${ordN} ${currentYear}`);

 $(this).find(`#${modalId}`).show();
 document.addEventListener("show", function(){
   $('td').off("click");
  console.log('working')
 });
 console.log(this);
 $(this).off("click",`#${modalId}`);
 });

Неважно, куда я смотрюне могу найти способ решить эту проблему ...

Answer 1

Я думаю, вы, возможно, неправильно поняли, как должны использоваться модалы.

По моему опыту, они всегда должны быть внизу страницы (в противном случае вы можете столкнуться с различными проблемами с позициями / размерами). , фон не работает и т. д.).

Так что, не добавляйте модал к тд. Просто поместите его внизу страницы и назовите $ (". Modal"). Modal ('show');

Я не понимаю, почему вы клонируете модал. Я предполагаю, что это может быть потому, что вы хотите, чтобы модал "сбрасывался" после каждого использования. Если это так, просто используйте один модальный. Но обновите / введите модальное содержимое перед открытием модального. Есть несколько методов для этого. Некоторый простой javascript мог бы сделать это, это может быть решено с помощью шаблонов или, в некоторых случаях, путем загрузки модального содержимого через ajax. Все зависит.

Например, вы можете сделать что-то вроде этого

<div class="my-modal-content d-none">[put you modal content html here]</div>

<div class="modal my-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      ...
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
       ...
      </div>
    </div>
  </div>
</div>

И тогда вы можете использовать такой скрипт

$('td').on('click', function(e) {
    var modalContentHtml = $(".my-modal-content").html();
    $(".my-modal .modal-body").html(modalContentHtml);

    // Do event binding to the modal content if necessary

    $(".my-modal").modal('show');

}

Answer 2

Вам нужно остановитьPropagation для обработчика событий щелчка каждого модального окна.

Я согласен с другим ответом, что на всю страницу должен быть только один модальный канал, который можно показать и скрыть.

Относительно вашего комментария: Чтобы "прикрепить к данной ячейке таблицы", вы должны параметризовать свой единственный экземпляр модального окна.

months = ["Jan", "Feb"];
currentMonth = 0;
currentYear = 2035;

$('td').on('click', function(e) {

  $('td').removeClass("selectedDate");
  $(this).addClass("selectedDate");
  var n = $(this).find('.date').text(); //selects the date input for the cell.
  let ordN = n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');

  let modal = $('#modalTemplate').clone(true);
  $(this).append(modal);
  let modalId = `${months[currentMonth]}-${n}-${currentYear}`;
  modal.attr('id', `${modalId}`);


  modal.find('#modalHeader').text(`${months[currentMonth]} ${ordN} ${currentYear}`);

  modal.show();
  modal.on('click', function(e) {
    e.stopPropagation();
  });

});

.modal {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input class="data" /></td>
    <td><input class="data" /></td>
  </tr>
  <tr>
    <td><input class="data" /></td>
    <td><input class="data" /></td>
  </tr>
</table>


<div class="modal" id="modalTemplate">
  <span id="modalHeader"></span> 
  Hello Modal
</div>