Почему прослушиватель событий отсоединяется от моей кнопки после двух нажатий? - PullRequest
Новая
       5

Почему прослушиватель событий отсоединяется от моей кнопки после двух нажатий?

1 голос
/ 19 января 2020

У меня есть прослушиватель событий на кнопке «Мне нравится», который должен оставаться привязанным к ней после любого количества нажатий, но после повторного нажатия он сам себя связывает. На главном html do c имеется скрипт, а на замене - do 10101 * (потому что скрипт не видит замены). Я попытался передать весь тег скрипта в контекст html, но это не сработало, попытался передать только путь к тегу скрипта, но это не сработало, попытался добавить addEventListener() в случае успеха в ajax функции, но это тоже не сработало. Может ли кто-нибудь сказать мне, почему он связывает себя? Я новичок в JavaScript / JQuery, поэтому все это ново для меня, и я не понимаю, как оно связывает себя.

Код довольно длинный, поэтому я заранее извиняюсь

handle_likes. js (фрагмент) 

$(".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 (основной шаблон - фрагмент) 

               <!-- 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>

лайков. 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 Ответ

1 голос
/ 19 января 2020

Если вы динамически загружаете контент или заменяете контент html на AJAX, вам необходимо обновить синтаксис функции щелчка следующим образом: 

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