Question

我有以下代码，我在我的网站上使用一个简单的LIKE系统。我遇到的问题是，如果用户点击类似，则css样式会按原样更改，但如果用户再次单击它，则应该不同。这种情况不会发生，如果点击两次就会喜欢它两次而不是喜欢/不同。

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

AJAX服务器代码返回以下有关成功的数据：

// 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>';

这是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>';
    }
    ?>

那里有没有人可以指出我的错误？

亲切的问候

Answer 1

目前您使用的是“直接”绑定，它只会在您的代码进行事件绑定调用时附加到页面上存在的元素。

在动态生成元素或操作元素（如删除和添加）时，您需要使用Event Delegation委托事件方法{/ 3}}。

一般语法

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

实施例

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

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

代替document，您应该使用最近的静态容器。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

AJAX成功无法正确更新

1 个答案: