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

Question

我在一个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")

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