Как переинициализировать или прикрепить обработчик к вновь добавленному элементу?

Question

[vovaaar]

Добрый день.

Есть код ининциализации поповера с параметрами. Берем id скрытого блока с версткой по data-selected-popover. Берем от туда верстку и вставляем в поповер. все работает отлично, но хотелось бы понять как правильно сделать, чтобы не дублировать код инициализации. Как поступить при добавлении нового элемента? необходимо опять запускать обход всего dom и искать [data-toggle="popover"] ?. То есть как сделать чтобы такая громоздкая инициализация не проходила дважды ? Иначе блок с параметрами может быть очень большой и получится две портянки одинаковые. Всем добра!

// Инициализирую поповер
  $('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
      var id = $(this).attr('data-selected-popover')
      return $('#' + id).html();
    }
  });

<div class="card card-path-selected" data-toggle="popover" title="Путь id 321" data-selected-popover="popoverContentControlBuildAndPath"></div>

cardBuildList.forEach(function(item) {
    item.addEventListener('click', function() {
      let cloneCardBuild = item.cloneNode(true);
      let cloneCardBuildTest = item.cloneNode(true);
      let editorMapHolderCoordinates = editorMapHolder.getBoundingClientRect();
      let dataName = item.getAttribute('data-name');
      cloneCardBuild.classList = "";
      cloneCardBuild.classList.add('card-build--selected-on-map', 'transfer-animation');
      cloneCardBuild.style.top = (editorMapHolder.scrollTop + (editorMapHolderCoordinates.height / 2)) + 'px';
      cloneCardBuild.style.left = (editorMapHolder.scrollLeft + (editorMapHolderCoordinates.width / 2)) + 'px';

      addBuildAndPathOnTabWhatMap('#selectedBuildHolder', cloneCardBuildTest);

      editorMap.appendChild(cloneCardBuild);

      // необходимо после добавления элемента опять инициализировать поповер
      $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
          var id = $(this).attr('data-selected-popover')
          return $('#' + id).html();
        }
      });
      
    })
  });

Answer 1

[vovaaar]

Пока решил вопрос так:

var popoverProperty = {
    html: true,
    content: function() {
      var id = $(this).attr('data-selected-popover')
      return $('#' + id).html();
    }
  }

$('[data-toggle="popover"]').popover(popoverProperty);

$('[data-toggle="popover"]').popover(popoverProperty);