Javascript 使用jQuery提交表单

我在Django使用一个测验web应用程序，它需要在每个问题上提交一份表格。这些问题显示得恰到好处。当试图提交带有问题的表单时，会出现问题

问题的答案（多选，4个答案）显示在

元素中。我希望通过单击答案（因此，单击

元素）提交答案，以便显示下一个问题。我不能让它工作，所以我不能得到任何答复提交。表单HTML如下所示：

<form id="game" action="" method="POST">{% csrf_token %}
  <input type="hidden" name="question_id" value="{{ question.id }}">
  <input type="hidden" name="answer">
  <ul class="list-group">

    {% for answer in form.answers %}
        <li class="list-group-item" name="answer" value="{{answer}}">
    {% endfor %}
</ul>

$(document).ready(function() {
    $('#game li').click(function() {
         $('input[name="answer"]').val($(this).value('answer'));
         $('#game').submit();
    });
});

<li class="list-group-item" name="answer" data-answer="{{answer}}">{{answer}}</li>

当点击答案“
”时，不会发生任何情况，并且控制台不会显示任何日志。
我怎样才能使它工作？谢谢

编辑1:

是的，我有管理测验的视图.py，这里有一个片段：

class QuizTake(FormView):
    form_class = QuestionForm
    template_name = 'question.html'

    def dispatch(self, request, *args, **kwargs):
        self.quiz = get_object_or_404(Quiz, url=self.kwargs['quiz_name'])
        if self.quiz.draft and not request.user.has_perm('quiz.change_quiz'):
            raise PermissionDenied

        self.logged_in_user = self.request.user.is_authenticated()

        if self.logged_in_user:
            self.sitting = Sitting.objects.user_sitting(request.user,
                                                        self.quiz)
        else:
            self.sitting = self.anon_load_sitting()

        if self.sitting is False:
            return render(request, 'single_complete.html')

        return super(QuizTake, self).dispatch(request, *args, **kwargs)

    def get_form(self, form_class):
        if self.logged_in_user:
            self.question = self.sitting.get_first_question()
            self.progress = self.sitting.progress()
        else:
            self.question = self.anon_next_question()
            self.progress = self.anon_sitting_progress()

        if self.question.__class__ is Essay_Question:
            form_class = EssayForm

        return form_class(**self.get_form_kwargs())

    def get_form_kwargs(self):
        kwargs = super(QuizTake, self).get_form_kwargs()

        return dict(kwargs, question=self.question)

    def form_valid(self, form):
        if self.logged_in_user:
            self.form_valid_user(form)
            if self.sitting.get_first_question() is False:
                return self.final_result_user()
        else:
            self.form_valid_anon(form)
            if not self.request.session[self.quiz.anon_q_list()]:
                return self.final_result_anon()

        self.request.POST = {}

        return super(QuizTake, self).get(self, self.request)

    def get_context_data(self, **kwargs):
        context = super(QuizTake, self).get_context_data(**kwargs)
        context['question'] = self.question
        context['quiz'] = self.quiz
        if hasattr(self, 'previous'):
            context['previous'] = self.previous
        if hasattr(self, 'progress'):
            context['progress'] = self.progress
        return context

    def form_valid_user(self, form):
        progress, c = Progress.objects.get_or_create(user=self.request.user)
        guess = form.cleaned_data['answers']
        is_correct = self.question.check_if_correct(guess)

        if is_correct is True:
            self.sitting.add_to_score(1)
            progress.update_score(self.question, 1, 1)
        else:
            self.sitting.add_incorrect_question(self.question)
            progress.update_score(self.question, 0, 1)

        if self.quiz.answers_at_end is not True:
            self.previous = {'previous_answer': guess,
                             'previous_outcome': is_correct,
                             'previous_question': self.question,
                             'answers': self.question.get_answers(),
                             'question_type': {self.question
                                               .__class__.__name__: True}}
        else:
........

这也是从thisforms.py中获取信息：

class QuestionForm(forms.Form):
    def __init__(self, question, *args, **kwargs):
        super(QuestionForm, self).__init__(*args, **kwargs)
        choice_list = [x for x in question.get_answers_list()]
        self.fields["answers"] = forms.ChoiceField(choices=choice_list,
                                                   widget=forms.RadioSelect)

我已经更改了您提供给我的代码，并尝试了不同的组合，但仍然不起作用。我无法获取提交的表单，并且控制台没有显示任何错误。这不可能吗

编辑2:

当我更改HTML代码并尝试按如下方式放置“
”标记时：

<form id="game" action="" method="POST">{% csrf_token %}
  <input type="hidden" name="question_id" value="{{ question.id }}">
  <input type="hidden" name="answer">
  <ul class="list-group">

    {% for answer in form.answers %}
        <li class="list-group-item" name="answer" value="{{answer}}">
    {% endfor %}
</ul>

$(document).ready(function() {
    $('#game li').click(function() {
         $('input[name="answer"]').val($(this).value('answer'));
         $('#game').submit();
    });
});

<li class="list-group-item" name="answer" data-answer="{{answer}}">{{answer}}</li>

{{{answer}

我将其作为输出（在本例中，显示2个可能的答案，2个
元素）：


当我退出li元素的“数据答案”时，它得到：


现在，当我把鼠标放在文本上时，它没有得到
'cursor:pointer'
，而之前在
'False'>'
中它得到了。但是，当我点击它时，什么也没有发生。这可能是
'views.py'
中的问题吗？在我使用“提交”按钮之前，它工作得很好。@JacobsWindsor

我有没有解释一下这个问题？我很困惑，谢谢你的回答。
我对你的用例有点困惑。听起来你好像想在点击多项选择题时向你的服务器发送AJAX请求。然后，服务器会用下一个问题做出响应，这个问题会呈现到表单中。如果是这样的话，那么它就可以了比您提供的要复杂一些。您需要：

抓取所选答案（如您所做）
向服务器发出AJAX请求，但不使用表单提交功能
将答案存储在服务器上
提出下一个问题
但是，从您提供的代码和说明中，我可以看出选择器不正确

试试这个：

$('#game ul.list-group li').click(function(){...});

但是，我建议使用，因为如果您有很多列表项，那么开销要低得多

$('#game ul.list-group').on('click', 'li', function(){...});

如果您想动态添加或删除问题，这也很有帮助，因为您不需要绑定任何新的事件处理程序“我假设您正在做一些动态添加问题的工作。
我对您的用例有点困惑。听起来，每当单击一个选择题时，您都想向服务器发送一个AJAX请求。然后，服务器用呈现到表单中的下一个问题进行响应。如果是这种情况，那么它比您提供的要复杂一些。您需要：

抓取所选答案（如您所做）
向服务器发出AJAX请求，但不使用表单提交功能
将答案存储在服务器上
提出下一个问题
但是，从您提供的代码和说明中，我可以看出选择器不正确

试试这个：

$('#game ul.list-group li').click(function(){...});

但是，我建议使用，因为如果您有很多列表项，那么开销要低得多

$('#game ul.list-group').on('click', 'li', function(){...});

如果您想动态添加或删除问题，这也会有所帮助，因为您不需要绑定任何新的事件处理程序。既然你说“答案已提交，以便可以显示下一个问题”，我假设你正在做一些动态添加问题。
你没有关闭你的
li
标签

{{{answer}}

而且li没有value属性，所以你不能像那样捕捉它。。。。试试这个

<li class="list-group-item" name="answer" data-answer="{{answer}}">{{answer}}</li>

$(document).ready(function() {
    $('#game li').click(function() {
         $('input[name="answer"]').val($(this).data('answer'));
         $('#game').submit();
    });
});

{{{answer}
$（文档）.ready（函数（）{
$（#game li'）。单击（函数（）{
$（'input[name=“answer”]'）.val（$（this.data（'answer'））；
$（“#游戏”）.submit（）；
});
});
您尚未关闭您的
li
标签

{{{answer}}

而且li没有value属性，所以你不能像那样捕捉它。。。。试试这个

<li class="list-group-item" name="answer" data-answer="{{answer}}">{{answer}}</li>

$(document).ready(function() {
    $('#game li').click(function() {
         $('input[name="answer"]').val($(this).data('answer'));
         $('#game').submit();
    });
});

{{{answer}
$（文档）.ready（函数（）{
$（#game li'）。单击（函数（）{
$（'input[name=“answer”]'）.val（$（this.data（'answer'））；
$（“#游戏”）.submit（）；
});
});
我编辑了第一篇文章，也许我做错了什么。谢谢你的回答。我编辑了第一篇文章，也许我做错了什么。谢谢你的回答。我已经试过了，并在第一篇文章中公布了结果。希望它能提供一些帮助。@Jim您的
answer
变量包含html代码，这就是为什么当您使用
data-answer=“{{answer}}”
时，代码会变得一团糟。。。。只需在数据应答中输入单选按钮的值，也可以使用firebug或chrome开发者工具控制台调试JavaScripts谢谢您的回答。我已经试过了，并在第一篇文章中公布了结果。希望它能提供一些帮助。@Jim您的
answer
变量包含html代码，这就是为什么当您使用
data-answer=“{{answer}}”
时，代码会变得一团糟。。。。只需在数据应答中输入单选按钮的值，也可以使用firebug或chrome开发者工具控制台