Событие щелчка JQuery не работает на Thymeleaf

Question

Я занимаюсь разработкой сайта с помощью Spring Boot. У меня есть список элементов, и каждый элемент имеет ссылку. Я хочу вызвать функцию JavaScript, когда ссылки нажаты. У меня есть этот код

<div class="col-sm-4" th:each="product : ${productsList}">
  <!-- Code... -->
  <a th:id="${'buyButton' + product.id}" <!-- rest of attributes -->></a>
  <!-- More code... -->
  <script th:inline="javascript">
    /*<![CDATA[*/
      console.log("Log1");
      $("#buyButton[[${product.id}]]").click(function() {
        console.log("Log2");
      });
    /*]]>*/
  </script>
</div>

productsList имеет 5 элементов, поэтому, когда я загружаю страницу, она печатает «Log1» пять раз, но когда я нажимаю на ссылки, функция, которая печатает «Log2», не работает.

Может кто-нибудь помочь мне. Я схожу с ума ...

Answer 1

Назначьте общий класс, т. Е. productBuyButton, элементу привязки и обработчику события присоединения, используя Class Selector $('.ClassName')

<div class="col-sm-4" th:each="product : ${productsList}">
  <!-- Code... -->
  <a class="productBuyButton" th:id="${'buyButton' + product.id}" <!-- rest of attributes -->></a>
  <!-- More code... -->

</div>

<script th:inline="javascript">
      $(".productBuyButton").click(function() {
        console.log(this.id);
        //Here `this` refers to element which invoked the event handler
      });
</script>

---

, если вы хотите сохранить существующий код, измените селектор на$('#buyButton${product.id}')