$("button").trigger("click") 似乎无法正常工作答案

【问题标题】：$("button").trigger("click") does not seem to be working properly$("button").trigger("click") 似乎无法正常工作
【发布时间】：2019-12-12 01:22:49
【问题描述】：

我最近制作了一个名为“Mathquiz”的程序。基本上，该程序会问两个问题，当单击提交按钮时，它会显示您答对了多少，并将您的分数添加到数据库中，通过您的电子邮件识别您。我尝试添加一个额外的功能，一个计时器：当时间用完时，它应该表现得就像点击了提交按钮一样。

但是，当我运行代码时，它不起作用。地址栏显示“http://localhost:3000/?q1=correct&q2=wrong”，但它没有转到它应该去的其他页面。

代码如下：

    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
</head>
<body onload = "timer();">
<span id = "timer">0:00</span>
<br>
E-mail: <input type="text" id = "email"> <span id = "emCheck" style = "color:red;">Please enter valid e-mail address.</span>
<br>
<br>
<!-- <form action = "result.html"> -->
  <!-- so the question is how do we get it to link to another page -->
  <form>
  <ol>
  <li>  
  <p>What is 2 + 2?</p>
  <input type="radio" name="q1" value="correct">4<br>
  <input type="radio" name="q1" value="wrong">8<br>
  <input type="radio" name="q1" value="wrong">6
</li>
<br>
<li>
  <p>What is 2 + 6?</p>
  <input type="radio" name="q2" value="correct">8<br>
  <input type="radio" name="q2" value="wrong">14<br>
  <input type="radio" name="q2" value="wrong">3
</li>
  </ol>
  <button onclick = "check();"><a href = "api/result">submit</a></button>
</form>
<!-- <script src="script.js"></script> -->
<script>
  time = 120;

function countDown(){
  time--;

  minutes = Math.floor(time/60);
  seconds = time%60;
  opZero = "";
  //must figure out how to make turn into a zero when seconds
  //becomes single digit

  $("#timer").text(minutes + ":" + opZero + seconds);
  //still need to figure out how to format time

  //When it reaches zero, same function as clicking submit.

  if (seconds < 10)
  {
    opZero = "0";
  }
  //this doesn't work.  Why!?


  if (time == 0)
  {
    $("button").trigger("click");
    // $("a").trigger("click");
    //why isn't this working?
    //the url even changes but the page does not.
  }
}

  function timer(){
    setInterval(countDown, 1000)
  }
// var q1int1 = Math.floor(Math.random() * 10) + 1;
// var q1int2 = Math.floor(Math.random() * 10) + 1;
var numCorrect = 0;
var userID = "";
var atSign = "@";
var dot = ".";
document.onkeyup = function(event)
{
    userID = $("#email").val();
    if (userID.includes(atSign) == true  && userID.includes(dot) == true)
    {
        $("#emCheck").text("Thank you for your email address!");
        $("#emCheck").css("color", "black");
    }
    else
    {
        $("#emCheck").text("Please enter a valid email.");
    }
//check e-mail for @ sign and .
}

function c(input)
{
if (input == "correct")
{
    numCorrect++;
}

}




function check()
{
var q1Answer = $("input[name='q1']:checked").val();
c(q1Answer);
var q2Answer = $("input[name='q2']:checked").val();
c(q2Answer);
var userID = $("#email").val();
var time = moment().format('MMMM Do YYYY, h:mm:ss a');

console.log("Time:" + time);
console.log("Answers:" + q1Answer + q2Answer);
console.log("Score:" + numCorrect);
console.log("email:" + userID);

//store num correct in local storage
localStorage.setItem("numCorrect", numCorrect);

var newItem = {email: userID,
                score: numCorrect,
        time: time}


      $.post("/api/new", newItem)
      .then(function(data) {
        console.log("newItem is:" + data);
        //those one does not show up
        alert("Adding task...");
      });

}

// function start()
// {
//  // $("#q1int1").text(q1int1);
//  // $("#q1int2").text(q1int2);

// }

</script>
</body>

这是为什么？我尝试在链接上添加一个“.trigger”，但这只会让事情变得更糟。

【问题讨论】：

为什么你的按钮里面有一个链接？这在语义上是不正确的。当你说“它没有转到它应该去的页面”时，你指的是按钮内的这个链接吗？
是的，当您点击提交时，url 显示为“localhost:3000/api/result”并显示文档“result.html”
抱歉，我无法理解。 URL 是 api/result 还是 result.html，除非 api/result 正在渲染 result.html 的内容？
后者是正确的。

标签： jquery post hyperlink

【解决方案1】：

考虑使用submit 事件处理程序更改处理表单“检查”和提交的方式。

提交表单后，您可以调用check()。当倒计时达到 0 时，您只是触发了提交事件——谁的处理程序随后调用 check() 并使用 location.href 重定向用户。

首先，修改您的检查函数，使其返回$.post，因为您需要在离开页面之前确保请求已完成。我们稍后会证明这一点。

function check() {
  ...
  return $.post("/api/new", ...);
}

在倒计时功能中，您需要在倒计时结束时触发提交事件，因此您需要将$("button").trigger("click") 替换为$("form").submit()

将您的按钮更改为标准提交按钮。这将在本机提交表单并触发您的提交处理程序。

<button type="submit">submit</button>

绑定一个调用check() 的提交处理程序，然后一旦该函数中的$.post 完成，它会将用户发送到下一页。

$("form").submit(function (event) {
  // prevents the default form behaviour
  event.preventDefault();
  // disable the submit button to prevent repeated submissions
  $(":submit", this).prop("disabled", true);
  // 'check' now returns $.post (Promise) therefore you can chain .then()
  check().then(function() {
    // redirect to the desired page
    window.location.href = "/api/result";
  });
});

【讨论】：

【解决方案2】：

尝试将ID添加到按钮元素并在jquery选择器中通过ID引用它，也许jquery并不真正

【讨论】：