Как в компоненте битрикс 1c сделать событие на кнопку в динамической разметке?

Question

[Cyber-Pavel]

У меня возникла проблема. В компоненте битркс 1с у меня следующая разметка:

<div data-script="slider" data-slider-options='{"autoplay":false,"breakpoints":{"320":{"slidesPerView":1,"spaceBetween":30},"768":{"slidesPerView":3,"spaceBetween":30},"1200":{"slidesPerView":3,"spaceBetween":30}},"content_element":"images","js":["js/module-swiper-bundle.esm.browser.min.js","js/module-vue.esm.browser.min.js","js/module-slider.js","js/module-vue-awesome-swiper.js"],"loop":false,"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"onClickZoom":false,"pagination":{"bulletActiveClass":"active","clickable":true,"el":".swiper-pagination","bulletElement":"span data-element=\"c2aa4a06-56f3-450d-8842-82437cb71e2b/9e0e10c9-b8de-4b3b-88d7-4ff86242fa81\" data-design-nested=\"Пагинация\""},"sliderColumns":{"max":4,"min":1},"slidesPerGroup":1,"space_between":true}' data-design="c2aa4a06-56f3-450d-8842-82437cb71e2b" class="swiper FinansSlider">
  <div class="swiper-wrapper">

    <? foreach ($arResult["ITEMS"] as $arItem) : ?>
      <?
      $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
      $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
      ?>

      <div class="swiper-slide swiper-slide-active" data-element="9d7631ef-ec1b-4cb8-92c0-049c143e2042/d2f87e5a-183b-4795-bca5-716c1d36f6f4" data-design-nested="Слайды" style="width: 350px; margin-right: 30px">
        <div class="container__video">
          <button  class="block__button"><svg class="icon-video" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" aria-labelledby="cli-play" role="presentation">
              <title id="cli-play" lang="en"></title>
              <g fill="currentColor">
                <path d="M20.0612 10.3661C21.3129 11.0933 21.3129 12.9067 20.0612 13.6339L7.82411 20.7431C6.56982 21.4718 5 20.5636 5 19.1092L5 4.89078C5 3.43643 6.56981 2.52821 7.82411 3.25689L20.0612 10.3661Z" fill-rule="evenodd" clip-rule="evenodd"></path>
              </g>
            </svg>
    </button>
          <div class="preview-video" style="background-image: url(<?= $arItem['PROPERTIES']['SRC']['VALUE'] ?>);"></div>

          <?= ($arItem['PROPERTIES']['VIDEO']["~VALUE"]["TEXT"]) ?>
        </div>
      </div>

    <? endforeach ?>
 </div>
</div>

У меня есть кнопка block__button. Я вешаю событие, но кнопка срабатывает только на первом элементе. Буду признателен любой помощи

window.onload = function() {
    document.querySelector(".block__button").addEventListener('click',function(event) {
        document.querySelector('.block__button').classList.add("display-none");
        document.querySelector('.preview-video').classList.add("display-none");
    });
}

Comments

[Ярослав Александров]

Я вешаю событие, но кнопка срабатывает только на первом элементе

Так там цикл, вам нужно это учитывать. Передаёте данные РНР из template.php в script.js шаблона компонента с помощью CUtil::PhpToJSObject
https://dev.1c-bitrix.ru/community/webdev/user/717...
Далее в script.js эти данные обрабатываете.
Посмотрите примеры как это делает сам битрикс в своих стандартных компонентах.

[Cyber-Pavel]

Ярослав Александров, Спасибо. За ответ, но я не разобрался как это работает. Но сделал как то по другому. Я повесил на элементы id c id элемента и у меня получилось, что надо. Примерно так:

[Ярослав Александров]

Cyber-Pavel,

повесил на элементы id c id элемента

Ну это в принципе самый простой вариант

Answer 1

[Михаил Ливач]

document.querySelector(".block__button") - возвращает первый элемент. Для коллекции элементов нужен document.querySelectorAll(".block__button")

Answer 2

[tgarl]

через jquery так

$(document).on('click', '.block__button',function(){
// тут уже у вас будет $(this) с которым делайте что нужно. 
});