使用 jQuery/Ajax 在動態 jinja 表中分別更新每個行按鈕

Question

我正在嘗試做的事情：
如果單擊按鈕，則只有單擊按鈕的表格行會在前端更新，不會更新任何其他行

怎么了：
單擊按鈕時，所有行都在更新其按鈕，這不是我想要實現的，但是，發布的航班號是正確的，因此后端沒有發生任何錯誤，但前端正在為所有按鈕顯示它

html：返回多個表

        {% for row in flight_results[result] %}
        <tr>
            <td>{{ row }}</td>
           <td><button class="flight_button" flight_number="{{ row[0] }}">Add flight_number</button></td>         
        </tr>
        {% endfor %}
        </table>
        {% endfor %}

js：在帖子中停止頁面刷新\

$(document).ready(function() {

$('.flight_button').on('click', function() {

    var flight_number = $(this).attr('flight_number');

    req = $.ajax({

        url : '/add_flight_number',
        type : 'POST',
        data : { flight_number : flight_number }
    });

       req.done(function() {
           $(".flight_button").html("Testing button");

    });
  });
});

它在所有按鈕上顯示“測試按鈕”，而不僅僅是被點擊的那個

Answer 1

原因在於您的$(".flight_button").html("Testing button"); 代碼。

在你的代替嘗試這樣。

req.done(function() {
     $(".flight_button[flight_number='" + flight_number + "']").html("Testing button");
});