すべてのリンクがAJAX呼び出しをトリガーしているわけではなく、最初のものだけがPython Flaskアプリケーションで行います。

Question

私はPythonフラスコアプリケーションの 'like'ボタンと 'unlike'ボタンに対して実装した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

まあ、同じidを持つ複数のhtml要素があるため、すべてのイベントは、それらの最初のイベントだけを起動します。

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

と使用あなたのJavaScriptでjQueryのセレクタ：

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

は、HTMLだけでクラスを使用します