並非所有的鏈接都觸發AJAX調用，只有第一個在Python中執行Flask應用程序

Question

我有一個奇怪的問題，我已經爲python燒瓶應用程序中的'like'和'different'按鈕實現了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."); 
    } 

所以，只有第一個活性製品可以有一個AJAX調用。

Answer 1

嗯，有不止一個HTML元素用相同的ID，所以所有事件將僅針對第一人。

只需使用類中的HTML：

在JavaScript

{% for article in articles %} 
    {% if article._id in likes %} 
     <button class="unlike-button" ...></button> 
    {% else %} 
     <button class="like-button" ...></button> 
    {% endif %} 
{% endfor %} 

而且使用jQuery選擇：

$('.like-button').on('click', function(){ 
    var data = { "article": $(this).val()}; 
    ... your ajax code 
}