当我点击链接时,它会弹出一个弹出框,显示从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请求中执行的操作。
现在当你单击右键时,它应该触发一个ajax请求大约97%,完全相同的代码如下所示:
$(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();绑定(“click”,function)以尝试绑定按钮。
我试过的所有这些结果都是一样的。
编辑::这是右键的html
<i class="fa fa-chevron-right" data-id=""></i>