javascript - jQuery - onclick 事件在第二次单击后不会更改类

Question

功能:

当我点击类为 thumb_like 或 thumb_unlike 的元素时，我将使用 POST 为图像添加/删除 like。 thumb_count 类的元素将根据用户的操作增加/减少。如果他喜欢将 1 添加到当前计数等...

thumb_unlike 是用户不喜欢图像的默认状态

问题:

当我点击类为 thumb_like/thumb_unlike 的元素时，它会按照说明进行操作，但第二次点击不会更改类，用户可以添加/删除不止 1 个喜欢(将 thumb_count 增加 1)

HTML 标记:

<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');
    });
});

Answer 1

当函数被调用时，监听器会附加到元素上。按照您的方式，听众本身就依附于拇指。我认为解决这个问题的最简单方法是将监听器附加到父元素并委托(delegate)给拇指。像这样:

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

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