Question

注意：我只是在学习jQuery，所以如果能够更有效地完成，请分享。

我正在编写一个关注/取消关注功能。用户跟随另一个用户的部分工作（请参阅下面的第一个片段），但现在我想更改“关注”，当用户将鼠标悬停在“关注”时更改“取消关注”。

“跟随”的代码在这里（可行）：

$(document).on('click','a.follow-user',function () {
    event.preventDefault();
    var action = $(this).attr("action");
    var userid = $(this).attr("userid");
    var follower_userid = $(this).attr("follower_userid");

    $.ajax({
            type: "POST",
            url: "/follow-user.php",
            data: "action=" + action + "&userid=" + userid + "&follower_userid=" + follower_userid,
            success: function(data) {
                if (data == "FOLLOWED") {
                    $(".follow-user").html("Following");
                    $(".follow-user").attr({"action" : "0"});
                    $(".follow-user").removeClass("follow-user").addClass("following-user");
                } else {
                    $(".follow-user").removeClass(".follow-user").addClass("icon-warning-sign");
                }
            }
    });
});

和鼠标在“关注”文本上的代码在这里（它不起作用 - 没有错误）：

$(".following-user").on("mouseover", function () {
    $(this).html("Unfollow")
    $(this).attr({"action" : "1"});

    }).mouseout(function() {

    $(this).html("Following")
    $(this).attr({"action" : "0"});
});

Answer 1

你需要这个：

$(document).on( 'mouseover', '.following-user', function() {

Answer 2

尝试将following-user转换为文档或最接近的静态父

$(document).on("mouseover", ".following-user",function () {

Answer 3

使用事件委派绑定事件处理程序。

$(document).on({
  mouseover: function () {
    $(this).html("Unfollow").attr({
      "action": "1"
    });
  },
  mouseout: function () {
    $(this).html("Following").attr({
      "action": "0"
    });
  }
}, ".following-user");

特别是因为你正在改变它们的HTML。

在加载DOM后如何使用jQuery绑定鼠标悬停？

3 个答案: