Question

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

Unvoted

Voted!

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

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

以下.on（）方法将在整个动态变化中起作用。

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

作为一般规则，通过您希望通过代码动态添加和删除的特定类访问元素是一个值得怀疑的做法。您应该通过ID或名称或您不会添加和删除的类来访问元素，这样可以简化整体结构。

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

Answer 2

问题是当您加载页面时，只有一个元素具有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');
        });
    }

使用AJAX的投票/不投票系统

2 个答案: