ajax-цикл jQuery, содержащий событие onclick, изменяет только последнее вхождение

Question

На моей странице отображаются сообщения, хранящиеся в моей базе данных, и пары кнопок «Нравится» / «Не нравится» для каждого сообщения.Я пытаюсь сделать так, чтобы, когда пользователь нажимает «нравится» или «не нравится», значение отправляется в мою базу данных для последующего повторного сбора.

У меня есть сложный цикл, который я надеюсь объяснить: при загрузке страницы ajaxсделан вызов во внешний php-файл для извлечения данных из моей базы данных.Результатом является массив объектов, который содержит «postID»: значение.Внутри цикла for я храню значение внутри var postID для легкого доступа.Я явно ошибаюсь, потому что код выполняется, но отправляет только значение и postID последнего вхождения в цикле независимо от того, какую пару кнопок я нажимаю: если в моей базе данных 11 записей и я нажимаю «как»"в посте 3 будет храниться значение 'like', но для поста 11. Если я нажму dislike, в посте 7 будет сохранено значение 'dislike', но для поста 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"}]}

Div для записей имеют следующий формат:

<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 (включает только кнопку «Мне нравится»):

$(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, а не отправляет 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/