为啥单击两次后我的事件侦听器与按钮解除绑定？

Posted 2023-02-24

【中文标题】为啥单击两次后我的事件侦听器与按钮解除绑定？

【英文标题】：Why is my event listener unbinding from my button after two clicks?为什么单击两次后我的事件侦听器与按钮解除绑定？

【发布时间】：2020-05-05 17:17:29

【问题描述】：

我在一个like 按钮上有一个事件监听器，在点击任意次数后它应该保持绑定，但在第二次点击后，它会解除自身的绑定。主 html 文档上有一个脚本，替换文档上有一个脚本（因为脚本看不到替换）。我尝试通过上下文将整个脚本标记传递给 html，但没有成功，尝试只传递脚本标记的路径，但没有成功，尝试在 ajax 函数中添加 addEventListener() 成功但那也没有用。谁能告诉我为什么它会解开自己的束缚？我是 javascript/JQuery 的新手，所以所有这些对我来说都是新的，我不明白它是如何解除自身绑定的。

代码比较长，提前致歉

handle_likes.js (sn-p)

$(".like-post-btn").on('click', function()
    console.log("Thing was clicked!"); // sanity check

    if ($(".like-post-btn").val() == "not-liked") 
        like_post();
    
    if ($(".like-post-btn").val() == "is-liked") 
        unlike_post();
    
);
function unlike_post()
    console.log("Unlike post called...") // sanity check
    console.log("Test JQuery unlike post..");
    console.log($("#post_id"));
    console.log($("#post_type"));
    $.ajax(
        url: "posting/unlike_post/",
        data: 
            post_id : $("#post_id").val(),
            post_type : $("#post_type").val()
        ,
        success: function(data) 
            $('.like-stuff').html(data);
            ,
        error : function(xhr,errmsg,err) 
            $('#results').html("<div class='alert-box alert radius' data-alert>Oops! Please contact an admin for we have encountered an error: "+errmsg+
                " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
            console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        
    );
;

feed.html（主模板-sn-p）

               <!-- If revisiting a liked post -->
                <div class="like-stuff">
                % if not request.user|user_liked_post:post %
                <button class='like-post-btn' value="like_btn_val">
                <span class="glyphicon glyphicon-thumbs-up"></span>Like</button>
                % else %
                <button class='like-post-btn' value="like_btn_val">
                <span class="glyphicon glyphicon-thumbs-up"></span>Unlike</button>
                % endif %
                <div class="like-count">post.like_count<div>

                % if not request.user|user_disliked_post:post %
                <button class='dislike-post-btn' value="dislike_btn_val">
                <span class="glyphicon glyphicon-thumbs-down"></span>Dislike</button>
                % else %
                <button class='dislike-post-btn' value="dislike_btn_val">
                <span class="glyphicon glyphicon-thumbs-down"></span>Undislike</button>
                % endif %
                <div class="dislike-count">post.dislike_count</div>
                </div>
<script src="static/js/handle_likes.js"></script>

likes.html（替换html）

<!--The top two buttons are the only way I could pass the id and type after the first click-->
<button id="post_id" value="post_id" hidden="">id: post_id</div>
<button id="post_type" value="post_type" hidden="">type: post_type</div>
<div class="like-stuff">
<button class='like-post-btn' value="like_btn_val">
<span class="glyphicon glyphicon-thumbs-up"></span>like_btn</button>
<h1>like_count</h1>

<button class='dislike-post-btn' value="dislike_btn_val">
<span class="glyphicon glyphicon-thumbs-down"></span>dislike_btn</button>
<h1>dislike_count</h1>
</div>
<script src="static/js/handle_likes.js"></script>

views.py（不同于函数）

@login_required
def unlike_post(request, **kwargs):              
    if request.is_ajax():
        post_id = request.GET.get('post_id')
        post_type = request.GET.get('post_type')

        print("Debug in like_post line 493:",post_id, post_type)

        if not post_id or not post_type:
            raise Exception("Post id or Post type not passed to 'unlike post' please fix it")
        post = toolz.get_post(post_id, post_type)

        if user_liked(post, request.user):
            delete_like(post, request.user)
            like_count = post.like_count

            # Start context variables
            dislike_btn = "Dislike"
            dislike_btn_val = "not-disliked"
            dislike_count = post.dislike_count
            data = 
            'post_id': post_id,
            'post_type': post_type,
            'like_count': like_count,
            'like_btn': 'Like',
            'like_btn_val': 'not-liked',
            'dislike_btn': dislike_btn,
            'dislike_btn_val': dislike_btn_val,
            'dislike_count': dislike_count
            
            return render(None, 'likes.html', data)
        else:
            return HttpResponse("You're trying to unlike the post twice...stop it")
    else:
        raise Exception("Not ajax")

【参考方案1】：

如果您是动态加载内容或使用 AJAX 替换 html 内容，则需要将点击函数语法更新为：

$(document).on('click', ".like-post-btn", function()
    console.log("Thing was clicked!"); // sanity check

    if ($(".like-post-btn").val() == "not-liked") 
        like_post();
    
    if ($(".like-post-btn").val() == "is-liked") 
        unlike_post();
    
);

【讨论】：

太棒了！谢谢！！我不得不删除替换 html 上的脚本标签，因为在我单击它时，它被调用了两次 distinct_post()。我会猜测并说主文档脚本没有看到按钮，因为我让脚本在文档准备好之前就开始监听了。我说的对吗？

是的，事件在渲染时分配给元素，所以如果我们希望为现有和即将到来的元素分配事件，我们需要遵循文档语法

再次感谢您，您是否有指向 ajax/JQuery 的优秀文档的链接？另外，你知道 Angular JS 是否比这一切更容易使用吗？我知道它应该是一种动力装置。

我个人建议你先看看official document。尝试文档中提供的所有示例和事件。然后，您可以尝试通过其他视频教程、文章等来升级自己。