jQuery - onclick event does not change class after second click

Question

Functionality:

When I click on element with class thumb_like or thumb_unlike then I will add/remove like for image with POST. Element with class thumb_count will increase/decrease by action of user. If he like add 1 to current count etc...

thumb_unlike is default status where user did not liked image

Problem:

When I click on element with class thumb_like/thumb_unlike it will do as told, but second click do not change class and user can add/remove more than just 1 like (increase thumb_count by 1)

HTML markup:

<div class="image_box">
    <div class="image">...</div>
    <div class="image_info">
        <div class="thumb_like" data-id="1"></div>
        <div class="thumb_count">10</div> likes | 0 comments
    </div>
</div>

<div class="image_box">
    <div class="image">...</div>
    <div class="image_info">
        <div class="thumb_unlike" data-id="2"></div>
        <div class="thumb_count">55</div> likes | 0 comments
    </div>
</div>

Javascript

$(document).ready(function() {

    $(".thumb_unlike").click(function () {
        var image_id = $(this).attr('data-id');
        var count = $(this).next(".thumb_count").text();
        $(this).next(".thumb_count").html(parseInt(count) + 1)
        $.post('..url..' + image_id);

        $(this).removeClass();
        $(this).addClass('thumb_like');
    });

    $(".thumb_like").click(function () {
        var image_id = $(this).attr('data-id');
        var count = $(this).next(".thumb_count").text();
        $(this).next(".thumb_count").html(parseInt(count) - 1)
        $.post('..url..' + image_id);

        $(this).removeClass();
        $(this).addClass('thumb_unlike');
    });
});

@Ing.MichalHudak You mean `thumb_like/thumb_unlike` or `thumb-like/thumb-unlike `? — Fares M., Feb 21 '15 at 18:44
@FaresM. sorry, misspell in code, I was writing simple example to demonstrate problem. It is fixed now. It is `thumb_like` / `thumb_unlike` — Ing. Michal Hudak, Feb 21 '15 at 18:46

score 3 · Accepted Answer · answered Feb 21 '15 at 18:40

Listeners get attached to elements when the function gets called. The way you have it, listeners are attached to the thumbs themselves. I think the easiest way around this would be to attach the listener to a parent element and delegate to the thumbs. Like so:

$('.parent_div').on('click', '.thumb_like', function() {
  //thumb_like code here
});

$('.parent_div').on('click', '.thumb_unlike', function() {
  //thumb_like code here
});

score 2 · Answer 2 · edited May 23 '17 at 11:59

If your intent is to have the ability to toggle - I'd recommend one function. You can do this without even adjusting your HTML like this:

$(function() {
    $('body').on('click', '.thumb_like, .thumb_unlike', function() {
        var image_id = $(this).attr('data-id'),
            isLike = $(this).hasClass('thumb_like');
        $(this).toggleClass('thumb_like thumb_unlike')
               .next('.thumb_count')
               .text(function(_, i) { return +i + (isLike ? 1 : -1); });
        $.post('..url..', { 
            id: image_id,
            action: isLike ? 'like' : 'unlike'
        });
    });
});

This binds one function up at a higher div as evan suggests, but also allows for much less code, fewer event handlers, and is (IMO) easier to maintain since you're dealing with the logic once. You can additionally use a single server-side route for like & unlike.

You can play with it in a jsfiddle here.

jQuery - onclick event does not change class after second click

2 Answers2