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