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.");
    }

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

1 个答案: