基于AJAX的投票/取消投票系统

Question

我使用如下AJAX在Django上实现了一个投票/取消投票系统：

​

​

​

​

views.py

@login_required
def vote(request):
    post_id = None
    if request.method == 'GET':
        post_id = request.GET['post_id']

    if post_id:
        post = Post.objects.get(id=int(post_id))
        current_user = request.user.id

    try:
        voted = Vote.objects.get(post=post, user=current_user)
    except Vote.DoesNotExist:
        voted = None

    # Voting code

    if not voted:
        Vote.objects.get_or_create(post=post, user=request.user)
        post.points = post.vote_set.all().count()
        post.save()
        print("voted!")

    return HttpResponse(post.points)

@login_required
def unvote(request):
    post_id = None
    if request.method == 'GET':
        post_id = request.GET['post_id']

    if post_id:
        post = Post.objects.get(id=int(post_id))
        current_user = request.user.id

    try:
        voted = Vote.objects.get(post=post, user=current_user)
    except Vote.DoesNotExist:
        voted = None

    # Voting code

    if voted:
        Vote.objects.filter(post=post, user=request.user).delete()
        post.points = post.vote_set.all().count()
        post.save()
        print("unvoted!")

    return HttpResponse(post.points)

main.js

// Voting
$('.vote').click(function(){
    var postid;
    postid = $(this).attr("data-postid");
    $.get('/vote/', {post_id: postid}, function(data){ //Send post_id to vote view
        $('#points' + postid).html(data); // Data changed element
        $('#' + postid).attr('class', 'voted');
    });
});

// Unvoting
$('.voted').click(function(){
    var postid;
    postid = $(this).attr("data-postid");
    $.get('/unvote/', {post_id: postid}, function(data){ //Send post_id to unvote view
        $('#points' + postid).html(data); // Data changed element
        $('#' + postid).attr('class', 'vote');
    });
});

投票工作正常，但我必须刷新页面以不投票。以及不投票，然后再投票。这里发生什么事情？

Answer 1

问题是，当您加载页面时，只有一个元素具有vote或voted类。您应该添加一个类，比如votable，然后执行如下操作：

$('.votable').click(function(){
    var element = $(this),
        postid = element.attr("data-postid");

    if (element.hasClass('voted')) {
        // Unvoting
        $.get('/unvote/', {post_id: postid}, function(data) { //Send post_id to unvote view
            $('#points' + postid).html(data); // Data changed element
            $('#' + postid).removeClass('voted');
        }); 
    } else {
        // Voting
        $.get('/vote/', {post_id: postid}, function(data) { //Send post_id to vote view
            $('#points' + postid).html(data); // Data changed element
            $('#' + postid).addClass('voted');
        });
    }

Answer 2

click事件上的click()函数绑定是一个直接绑定，它只将only事件处理程序附加到已经存在的元素，它既不会绑定到将来创建的元素，也不会绑定到通过动态添加或删除的属性选择的元素(在本例中是类)。

下面的.on()方法将在动态更改过程中发挥作用。

$(document).on('click','.vote', function() {
    //Do Stuff
});

通常情况下，通过特定的类访问元素(您希望通过代码动态添加和删除元素)是值得怀疑的做法。您应该通过id或name或不添加和删除的类来访问元素，它简化了整个结构。

如果您通过$(document).on('click','#yourId', function(){});访问您的元素，它将清除您可能遇到的一些问题。