Добавлен пользовательский атрибут, не запускающий скрипт

Question

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

Пример выглядит так

<button data-custom-attr="123"> </button>

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

Я использую jQuery для выбора элемента, удаления атрибутов и добавления новых. Однако, когда я добавляю их к элементу, нажатие на него не вызывает всплывающее окно лайтбокса. Я также пытался создать новый элемент и заменить им текущий, но он тоже не работал.

В чем может быть причина? Можно ли добиться этого с помощью jQuery?

Код, который я использую:

<button class="mybtn" data-prop='1'></button>

Javascript

jQuery(".mybtn").each(function (index, object) {

  $(this).removeAttr('data-prop');
  $(this).attr('data-custom-attr','123');


});

(атрибут добавляется к элементу при его проверке)

Answer 1

Полагаю, скрипт lightbox запускается один раз в DOM-Ready. Если вы манипулируете DOM после, возможно, скрипт не заметит этого. Возможно ли перезапустить скрипт?

Answer 2

Попробуйте вызвать событие, привязав щелчок к телу, а не к самой кнопке, например:

$('body').on('click', '[data-custom-attr="123"]', function(){
    // the code when button is clicked
}