jQuery ajax循环包含仅更改最后出现的onclick事件。
jQuery ajax循环包含仅更改最后出现的onclick事件。
我的页面显示了存储在我的数据库中的帖子,并为每个帖子配对了一个赞/踩按钮。\n我想实现的是,当用户点击赞或踩时,将该值发送到我的数据库以便以后回忆。\n我有一个复杂的循环,希望能解释一下:\n在页面加载时,会调用一个ajax方法来从我的数据库中获取数据。结果是一个对象数组,其中包含了“postID”:value的键值对。在一个for循环中,我将该值存储在变量postID中以便于访问。显然,我做错了,因为代码确实执行了,但无论我按下哪对按钮,它只发送最后一次循环中的值和postID:如果数据库中有11个帖子,我在第3个帖子上按下“赞”,它将存储值“赞”,但是对于第11个帖子。如果我在第7个帖子上按下“踩”,它将存储值“踩”,但是对于第11个帖子。\n所以问题是,我应该如何修复这个问题,以便当我按下对帖子x的赞或踩时,它会为该帖子存储值,而不是数据库中的最后一个帖子?\n数组的样式如下:\n{\"s\":0,\"d\":[{\"postID\":\"1\"},{\"postID\":\"2\"},{\"\"postID\":\"3\"},{\"\"postID\":\"4\"},{\"\"postID\":\"5\"},{\"\"postID\":\"6\"},{\"\"postID\":\"7\"},{\"\"postID\":\"8\"},{\"\"postID\":\"9\"},{\"\"postID\":\"10\"},{\"\"postID\":\"11\"}]}\n
\n帖子div的格式如下:\n
//#代表数据库中的postID //#代表数据库中的postID //#代表数据库中的postID
\n我的jQuery代码(仅包括赞按钮):\n
$(document).ready(function() { $.ajax({ url: 'postID.php', //获取上述数组 type: 'POST', contentType: "application/json; charset=utf-8", dataType: "json", async: true, cache: false, success: function (post) { if (post.s == 0) { //使用post.d循环遍历返回的数据数组 for (var key in post.d) { var obj = post.d[key]; for (var prop in obj) { var postID = obj[prop]; //当点击赞按钮时执行以下操作 $('#like_' + postID).click(function() { // 声明变量 var value = '1'; // 将值发送到数据库 $.ajax({ url: 'check.php', //check.php接收到发送过来的值并将其存储到数据库中 type: 'POST', data: 'postID=' + postID + '&value=' + value, success: function(result) { $('#Message_'+ contestID).html('').html(result).prependTo('#post_' + postID); } }); }); } } } } }); });
\n所以,我的问题是第二个ajax循环只发送变量postID的最后一个实例,而不是发送实际点击的帖子的postID。\n有什么想法吗?
问题的出现的原因是因为使用了.live()方法,而这个方法在1.7版本之后就被弃用了。解决方法是使用.on()方法来替代.live()方法。
解决方法如下:
首先,需要更新html结构,给每个post添加一个唯一的id,以表示数据库中的postID。然后,在每个post中添加一个like按钮和一个dislike按钮。
然后,在jQuery代码中,使用.on()方法来绑定like按钮的点击事件。在点击事件中,获取当前like按钮的id,并从中提取出postID。然后,发送一个ajax请求到check.php文件,将postID和value作为数据发送到服务器。
在成功回调函数中,将服务器返回的结果显示在页面上。
最后,将代码上传到jsfiddle.net,并提供链接,以便其他人查看和调试代码。
问题的解决方法是:确保html结构与上述结构相同,并将postID设置为like div的php变量。这样就可以完美地解决问题了。