Открыть Bootstrap модальный щелчок автоматически сгенерированного элемента - PullRequest
Новая
       10

Открыть Bootstrap модальный щелчок автоматически сгенерированного элемента

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

У меня проблема при открытии модального Bootstrap 4 с использованием элемента, созданного Javascript. Есть две очень похожие карты (идентичные, но с разными идентификаторами). Первый жестко закодирован в html doc (и работает правильно). Другой генерируется простым JS-скриптом. Я пытаюсь использовать то же имя класса "openEditModal", но это не работает. Затем я объявил атрибуты «data-toggle» и «data-target» для обоих, но все еще работал только с жестко закодированной картой. Есть ли вероятность, что файл Bootstrap JS работает только с жестко закодированным элементом?

Кодированная карта HTML 

<div class="row" id="all-contacts-box">
        <!-- ____EXIST_ADDRESSES____ -->
        <!-- addressBoxWrapper -->
        <div class="col-xl-3 col-md-4 col-sm-6 col-12 mt-2 d-flex">
            <!-- addressBox -->
            <div class="card bg-light openEditModal label flex-fill">
                <!--contactHeader-->
                <div class="card-header pl-2 pt-1 font-weight-bold text-muted label-title">
                    Office Address
                </div>
                <!-- contactBody -->
                <div class="card-body row pt-0">
                    <!-- contactBodyLeft -->
                    <div class="col-4 d-flex justify-content-center align-items-center maps-pin">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <!-- contactBodyRight -->
                    <div class="col-8">
                        <h4 class="label-title font-weight-bold">Main Name</h4>
                        <h5 class="label-address font-weight-normal">Street 22</h5>
                        <h5 class="label-address font-weight-normal">City, Country</h5>
                    </div>
                </div>
            </div>
        </div>

Часть кода JS, которая генерирует новую карту 

var createContactBox = function(dataToDisplay, idCounter) {
  var mainAddressContainer = document.getElementById("all-contacts-box");
  var addNewBox = document.getElementById("add-new-box");

  var addressBoxWrapper = document.createElement("div");
  var addressBox = document.createElement("div");

  mainAddressContainer.insertBefore(addressBoxWrapper, addNewBox);

  addressBoxWrapper.appendChild(addressBox);
  addressBoxWrapper.classList = "col-xl-3 col-md-4 col-sm-6 col-12 mt-2 d- 
 flex";
  addressBox.classList = "card bg-light openEditModal label flex-fill";

  addressBox.setAttribute("data-toggle", "modal");
  addressBox.setAttribute("data-target", "editBoxModal");
};

 $(".openEditModal").click(function() {
   $("#editBoxModal").modal();
 });

1 Ответ

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

Проблема с динамически создаваемыми элементами заключается в том, что они не создаются с теми же обработчиками событий, что и существующие элементы.

Чтобы это исправить, вам нужно «обновить» слушателей после добавления динамически элемента.

Поэтому я добавляю обработчики событий в функцию и выключаю ее перед тем, как включить (что-то вроде перезапуска). Если вы не выключите его, событие будет вызываться столько раз, сколько эта функция вызывается, и вы не хотите этого. 

function refreshEvents() {
  $(".openEditModal").off();
  $("#add-new-box").off();

  $(".openEditModal").click(function() {
    $("#editBoxModal").modal();
  });

  $("#add-new-box").click(function() {
    $("#addNewBoxModal").modal();
  });
}

Теперь вы можете вызывать эту функцию всякий раз, когда создаете другой элемент. Поэтому я называю это после того, как вы создали элемент.

Это рабочая скрипка

...