Как сделать каждую кнопку интерактивной? [Дубликат]

Rocky Singh спросил: 03 февраля 2018 в 10:17 в: jquery

У этого вопроса уже есть ответ:

  • Does ID have to be unique in the whole page? 10 ответов
  • Can't fire click event on the elements with same id 5 ответов

Итак, я перебираю объект JSON и визуализую данные в представлении. У каждого объекта также есть кнопка, которую я создал. Когда я вызываю идею этой кнопки, чтобы сделать какое-то действие, работает только первая кнопка. Вот код html:

<div class="row text-center" style="display:flex; flex-wrap: wrap;">
    <% data["Search"].forEach((movie) => { %>
      <div class="col-md-3 col-sm-6">
        <div  class="thumbnail">
          <div class="caption">
            <li><%= movie["Title"] %></li>
            <li><%= movie["Year"] %></li>
            <li id="id"><%= movie["imdbID"]%></li>
          </div>
          <img  src="<%= movie["Poster"] %>" alt="">
          <button id="clickable"  type="button" name="button">Get More details About The Movie</button>
        </div>
      </div>
    <% }) %>
</div>
</div>

Как вы можете, кнопка имеет id="clickable". Вот код для jQuery:

<script  type="text/javascript">
$(document).ready(function(){
//alert(this).data("#hello");
$( "#clickable" ).click(function() {
  var item = $("#id").text();
  alert('Selected Name = ' + item );
});
});

Пока я просто показываю данные id="id". Предположим, что цикл через 10 разных фильмов, но только первый работает, когда я нажимаю id="clickable".

Спасибо.


0 ответов