jQuery ajax循环包含onclick事件只更改最后一次出现

Question

我的页面显示存储在我的数据库中的帖子，并对每个帖子配对一个喜欢/不喜欢按钮。我试图使它，当用户点击喜欢或不喜欢，值被发送到我的数据库供以后的回忆。

我有一个复杂的循环，我希望解释一下:在页面加载时，将对外部php文件进行ajax调用，以便从数据库中获取数据。结果是一个对象数组，其中包含"postID":value。在for循环中，我将值存储在var postID中，以便于访问。我显然要去这个错误，因为代码确实执行，但只发送的值和postd的最后一次出现在循环中，无论哪对按钮我按下:如果我有11个帖子在我的数据库中，我按下"喜欢"的帖子3，它将存储值"喜欢"，但为后11。如果我在第7个帖子上按下"不喜欢"，它将存储值"不喜欢"，但对于第11个帖子。

所以问题是，我如何解决这个问题，所以当我按喜欢或不喜欢的帖子x，它会存储相同的帖子的值，而不是最后一个帖子在我的数据库?

数组是这样的:

{"s":0,"d":[{"postID":"1"},{"postID":"2"},{""pos‌​tID":"3"},{""pos‌​tID":"4"},{""pos‌​tID":"5"},{""pos‌​tID":"6"},{""pos‌​tID":"7"},{""pos‌​tID":"8"},{""pos‌​tID":"9"},{""pos‌​tID":"10"},{""pos‌​tID":"11"}]}

postdiv的格式如下:

<div id="post_#"> //# representing the postID in the database
    <div id="like_#"></div> //# repesenting the postID in the database
    <div id="dislike_#"></div> //# representing the postID in the database
</div>

我的jQuery(只包含like按钮):

$(document).ready(function() {
    $.ajax({
        url: 'postID.php', //fetch the above array
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        cache: false,
        success: function (post) {
                    if (post.s == 0) {
                    //Loop through returned data array using: post.d
                        for (var key in post.d) {
                            var obj = post.d[key];
                            for (var prop in obj) {
                                var postID = obj[prop];
                                //When like button is clicked do this
                                $('#like_' + postID).click(function() {
                                    // Declare variables
                                    var value = '1';
                                    // Send values to database
                                    $.ajax({
                                        url: 'check.php', //check.php receives the values sent to it and stores them in the database
                                        type: 'POST',
                                        data: 'postID=' + postID + '&value=' + value,
                                        success: function(result) {
                                            $('#Message_'+ contestID).html('').html(result).prependTo('#post_' + postID);
                                        }
                                    });
                                 });
                             }
                         }
                     }
                  }
     });
});

所以再一次，我的问题是，第二个ajax循环只发送的最后一个实例的var postID，而不是发送的post的postID的实际点击。

任何想法?

Answer 1

*更新为使用.on()而不是.live()，因为自1.7起已弃用试试这个:

html

<div id="post_#" class="post"> //# representing the postID in the database
    <div id="like_#" class="like">test</div> //# repesenting the postID in the database
    <div id="dislike_#" class="dislike"></div> //# representing the postID in the database
</div>

jquery

$(document).ready(function() {
//When like button is clicked do this
$('.like').on('click', function() {
    var postID = $(this).attr('id').replace('like_', '');
    // Declare variables
    var value = '1';
    // Send values to database
    $.ajax({
        url: 'check.php',
        //check.php receives the values sent to it and stores them in the database
        type: 'POST',
        data: 'postID=' + postID + '&value=' + value,
        success: function(result) {
            $('#Message_' + contestID).html('').html(result).prependTo(this);
        }
    });
});
});

下面是一个示例链接http://jsfiddle.net/TXwZk/