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

我有一张这样的桌子：

当我点击链接时，它会弹出一个灯箱，显示从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请求接收的数据显示：

因此，当我将右按钮的数据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);
            }
        });
    });
});

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

好的，所以理论上，每次我点击这个右键，它都应该循环通过刚才运行的相同过程。但是，当我再次单击它时，它会返回相同的数据

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

$(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);
            }
        });
    });
});

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

顺便说一下，我还尝试将第二个ajax请求放入函数中，并从右键onclick=“”调用它

我也尝试过替换。单击（）；绑定（“单击”，函数）尝试绑定按钮

所有这些我尝试过的东西都是一样的结果

编辑：：这是右键的html

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

---

尝试将

attr（）

更改为

prop（）

。有时候这是个问题

您也可以尝试使用

data（）

---

应该会让您有更好的了解。

尝试将

attr（）

更改为

prop（）

。有时候这是个问题

您也可以尝试使用

data（）

---

应该会让您有更好的了解。

事件是第二次触发的吗？@Tushar是的，它会通过ajax请求，但会从第一次单击时带回数据，这可以重复10次，我会得到10组相同的结果（都与上一次的reviewID有关）。我认为您传递的id没有更新（V形单击功能上的ID）。一种解决方法可能是在JS中定义一个变量，该变量保存右键和左键单击的ID，并由单击函数更新。但我想还有一个更好的解决方案。您可以发布右键按钮的html吗？并且您确定您从

数据中获得了正确的值。nextID

？是否为第二个ti触发事件me？@Tushar是的，它通过ajax请求，但从第一次单击它时带回数据，这可以重复10次，我将得到10组相同的结果（都与前面的reviewID有关）。我认为您传递的id没有更新（chevrons click函数上的id）。一种解决方法可能是在JS中定义一个变量，该变量保存右键和左键单击的ID，并由单击函数更新。但我想还有一个更好的解决方案。您可以发布右键按钮的html吗？并且您确定您从

数据中获得了正确的值。nextID

？