AJAX Success not updating correctly

Question

I have the following code which I am using for a simple LIKE system on my site. The problem I am having is that if a user clicks like, the css style changes as it should, but if the user clicks it again it should then unlike. This is not happening, if the like is clicked twice it likes it twice rather than like/unlike.

The JS:

// ADD THE LIKE
$(function() {
    $(".like").click(function() {
        var item_id = $(this).attr("id");
        $('a#' + item_id).removeClass("like");
        $.ajax({
            type: "POST",
            url: "statAdd.php",
            data: "item_id=" + item_id + "&uname=" + "<?php echo $memName; ?>" + "&uID=" + "<?php echo $memID; ?>" + "&statType=" + "like",
            cache: false,
            success: function(data) {
                $('a#' + item_id).addClass("liked");
                $('a#' + item_id).html(data);
            }
        });
        return false;
    });
});

// REMOVE THE LIKE
$(function() {
    $(".liked").click(function() {
        var item_id = $(this).attr("id");
        $('a#' + item_id).removeClass("liked");
        $.ajax({
            type: "POST",
            url: "statAdd.php",
            data: "item_id=" + item_id + "&uname=" + "<?php echo $memName; ?>" + "&uID=" + "<?php echo $memID; ?>" + "&statType=" + "liked",
            cache: false,
            success: function(data) {
                $('a#' + item_id).addClass("like");
                $('a#' + item_id).html(data);
            }
        });
        return false;
    });
});

The AJAX server code returns the following data on success:

// ADD LIKE
echo '<i class="fa fa-heart"></i> <span>'.$number.' Likes including you</span>';

// REMOVE LIKE
echo '<i class="fa fa-heart"></i> <span>'.$number.' Likes</span>';

This is the HTML:

<?php
// Check if the user has liked the post previously.
    if(mysqli_num_rows($qryLikes) == 0){
        echo '<a href="javascript:void();" title="LIKE THIS" class="like" id="'.$statRow['statID'].'"><i class="fa fa-heart"></i> <span>'.$likes.' Likes</span></a>';
    } else {
        echo '<a href="javascript:void();" title="UNLIKE THIS" class="liked" id="'.$statRow['statID'].'"><i class="fa fa-heart"></i> <span>'.$likes.' Likes including you</span></a>';
    }
    ?>

Is there anyone out there that can point me to my error?

Kind regards

do `click` event bind with `on` function. As dynamically added class not works as you do with click. — Parth Trivedi, Dec 21 '15 at 12:18
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — David, Dec 21 '15 at 12:19
Thank you for your time and comments. The answer below has fixed my issue. — NOJ75, Dec 21 '15 at 12:25

score 1 · Accepted Answer · answered Dec 21 '15 at 12:21

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.

You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation elements (like removing and adding ).

General Syntax

$(document).on('event','selector',callback_function)

Example

$(function() {
    // ADD THE LIKE
    $(document).on('click',".like", function() {
        //Existing code
    });

    // REMOVE THE LIKE
    $(document).on('click',".liked", function() {
        //Existing code
    });
});

In place of document you should use closest static container.

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

AJAX Success not updating correctly

1 Answers1