javascript - AJAX 调用仅在第一个链接中触发，不会在 for 循环内的任何其他链接中触发

Question

我在为 Python Flask 应用程序中 for 循环内的所有链接实现 AJAX 调用时遇到问题。

只有第一个链接会触发AJAX调用，其他链接不会触发AJAX调用。

下面是我实现的相应 .html 和 .js 文件的代码。

.html

{% for article in articles %}
  {% if article._id in likes %}
    <button data-toggle="tooltip" title="Unlike" id="unlike-button" value="{{article._id}}"><span id="user-like-recommend" class="glyphicon glyphicon-heart" aria-hidden="true"></span></button>
  {% else %}
    <button data-toggle="tooltip" title="Like" id="like-button" value="{{article._id}}"><span id="user-like-recommend" class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span></button>
  {% endif %}
{% endfor %}

.js

document.getElementById("like-button").addEventListener("click", function(e)    {
e.preventDefault();
var article = $('#like-button').val();
var data = {"article": article};
console.log(data);
if(data){
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: '/article_liked',
    dataType : 'json',
    data : JSON.stringify(data),
    success: function (response) {
      success("Article was successfully liked.");
    }

我应该怎么做才能解决这个问题？

Answer 1

将id改为类，id必须唯一

{% for article in articles %}
  {% if article._id in likes %}
    <button data-toggle="tooltip" title="Unlike" class="unlike-button" value="{{article._id}}"><span id="user-like-recommend" class="glyphicon glyphicon-heart" aria-hidden="true"></span></button>
  {% else %}
    <button data-toggle="tooltip" title="Like" class="like-button" value="{{article._id}}"><span id="user-like-recommend" class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span></button>
  {% endif %}
{% endfor %}

js:

$(".like-button").on("click", function(e)    {
e.preventDefault();
var article = $(this).val();
var data = {"article": article};
console.log(data);
if(data){
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: '/article_liked',
    dataType : 'json',
    data : JSON.stringify(data),
    success: function (response) {
      success("Article was successfully liked.");
    }