Ajax 请求在第二次尝试时不起作用

Question

我有一张如下所示的表格：

当我点击链接时，它会弹出一个灯框，其中包含从 ajax 请求接收到的信息。我使用锚标签数据属性中的 id 来查找相关记录。

我的弹出框有左右箭头，当点击它们时，它们应该执行另一个 ajax 请求来重新填充弹出框。

这是点击链接时发送的第一个 ajax 请求：

$(document).ready(function(){
    $('.modelLink').click(function(){
        //getting the reviewID from the data attribute on the link clicked
        var reviewID = $(this).data('id');

        $.ajaxSetup({
            headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
        });
        jQuery.ajax({
            url:'/flyout/' + reviewID,
            type: 'GET',
            success: function( data ){

                //setting the right buttons id for the next request
                $('.fa-chevron-right').attr('data-id', data.nextID);

                //this function has nothing to do with my problem.
                fillFlyoutController(data);
            },
            error: function (xhr, b, c) {
                console.log("xhr=" + xhr + " b=" + b + " c=" + c);
            }
        });
    });
});

此时我的弹出框很棒，显示了所有相关数据。在控制台中，从 ajax 请求中接收到的数据显示：

所以当我将右侧按钮的 data-id 设置为“data.nextID”时，您可以看到我在第一个 ajax 请求中做了什么。

现在，当您单击右侧按钮时，它应该会触发大约 97% 的 ajax 请求，代码完全相同，如下所示：

$(document).ready(function(){
    $('.fa-chevron-right').click(function() {
        //getting the reviewID from the right buttons data attribute 
        var reviewID = $(this).data('id');

        $.ajaxSetup({
            headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')}
        });
        jQuery.ajax({
            url: '/flyout/' + reviewID,
            type: 'GET',
            success: function (data) {
                //setting the right arrow reviewID to the nextID
                $('.fa-chevron-right').attr('data-id', data.nextID);

                //this function isn't relevant for this question.
                fillFlyoutController(data);
            },
            error: function (xhr, b, c) {
                console.log("xhr=" + xhr + " b=" + b + " c=" + c);
            }
        });
    });
});

现在奇怪的是，这实际上在第一次单击右键时起作用。返回的 json 如下所示当我 console.log 数据时：

好的，所以理论上每次我单击此右键时，它都应该循环执行刚刚工作的相同过程。但是，当我再次单击它时，它会返回相同的数据。

我的意思是它实际上是通过 ajax 请求，（即使右边的按钮现在有不同的 id）并从上一个请求中返回数据，如下所示：

有人知道为什么这不起作用吗？

编辑:: 顺便说一句，我也尝试将第二个 ajax 请求放入一个函数中，并从右键 onclick="" 调用它。

我也尝试过替换 .click(); to bind("click", function) 尝试绑定按钮。

所有这些我都试过了，结果都是一样的。

编辑:: 这是右键的 html

<i class="fa fa-chevron-right" data-id=""></i>

Answer 1

尝试将attr() 更改为prop()。有时这是个问题。

您也可以尝试使用data()

This link 应该会让您有更好的洞察力。