为什么preventDefault函数不能正常工作？

Question

我正在尝试使用PHP和Javascript创建测验。

用户点击答案后，会启动ajax请求，并在响应中给出结果。如果确实如此，则单击的按钮将获得“成功”类，如果为false，则为“错误”类。

此后按钮被禁用，用户可以点击下一个问题。 但问题是，在一两个问题之后，javascript函数不起作用，并且正在调用表单的默认操作。

$(document).ready(function(){

	// Get the form.
	var form = $('#bilderquiz');

	// Set up an event listener for the contact form.
	$(form).submit(function(e) {
		// Stop the browser from submitting the form.
		

		// Serialize the form data.
		var formData = $(form).serialize();

		// Submit the form using AJAX.
		e.preventDefault();
		$.ajax({
			type: 'POST',
			url: $(form).attr('action'),
			data: formData
			, async: false
		})
		.done(function(response) {
			
			var submittedAnswer = $("input[type=submit][clicked=true]");
			var allAnswers = document.querySelectorAll( ".answerButton" );
			
			alert(response);
			
			if(response == 'trueAnswer'){
				submittedAnswer.removeClass('wrongAnswer');
				submittedAnswer.addClass('trueAnswer');
				$(".answerButton").attr('disabled', true);
			} else{
				submittedAnswer.removeClass('trueAnswer');
				submittedAnswer.addClass('wrongAnswer');
				$(".answerButton").attr('disabled', true);
			}
		})
		.fail(function(data) {

			// Set the message text.
			if (data.responseText !== '') {
				$(formMessages).text(data.responseText);
			} else {
				$(formMessages).text('Oops! An error occured and your message could not be sent.');
			}
		});

	});
	
});

function setClicked(input){
	$(input).parents("form").removeAttr("clicked");
	$(input).attr("clicked", "true");
}

<div class="answerChar">A</div>
              <form id="bilderquiz" action="includes/functions.php" method="post">
                <button class="answerButton" type="submit" id="selection" name="selection" value="0" onclick="setClicked(this)">
                  <?php echo $questionData['answerButtons'][0] ;?>
                </button>
              </form>   
            </div>
            <div class="col-sm-6">
              <div class="answerChar">B</div>
              <form id="bilderquiz" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
                <button class="answerButton" type="submit" id="selection" name="selection" value="1" onclick="setClicked(this)">
                  <?php echo $questionData['answerButtons'][1];?>
                </button>
              </form> 
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="answerChar">C</div>
              <form id="bilderquiz" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
                <button class="answerButton" type="submit" id="selection" name="selection" value="2" onclick="setClicked(this)">
                  <?php echo $questionData['answerButtons'][2];?>
                </button>
              </form> 
            </div>
            <div class="col-sm-6">
              <div class="answerChar">D</div>
              <form id="bilderquiz" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
                <button class="answerButton" type="submit" id="selection" name="selection" value="3" onclick="setClicked(this)">
                  <?php echo $questionData['answerButtons'][3];?>
                </button>
              </form> 
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
            <form id="bilderquiz" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
              <button class="submitButton" type="submit" id="selection" name="selection" value="4" onclick="setClicked(this)">Nächste Frage</button>
            </form> 
            </div>
          </div>

我的第二个问题是，这条线也不起作用：

submittedAnswer.removeClass('wrongAnswer');
submittedAnswer.addClass('trueAnswer');

Answer 1

您的表单需要唯一的ID，现在它们都是id =＆＃34; bilderquiz＆＃34; 或者你可以使用类。

php：

<form class="capture-me">...</form>
<form class="capture-me">...</form>

JS：

$('form.capture-me').on('submit',function(e){ .....