无法使用JQuery更新内部HTML，它会立即返回 [英] Can't update inner HTML with JQuery, it turns back immediately

问题描述

我一直在尝试使此非常简单的功能起作用，即用户单击提交"按钮并更新了问题编号.

I have been trying to make this very simple feature work where the user clicks the submit button and the question number is updated.

在浏览器上，当我单击按钮时，问题编号会立即变成"2"，然后立即变回"1".没有控制台警告或错误.

On the browser when I click the button the question number becomes "2" for a second and turns back to "1" immediately. There is no console warnings or errors.

我也在JSFiddle上尝试过，当按下按钮时，它给了我404错误代码.

I tried it on the JSFiddle as well and when the button is pressed it gave me a 404 error code.

这是我尝试运行的非常小的脚本和HTML，也是 JSFiddle :

Here is the very small script and HTML that I am trying to run and also the JSFiddle:

$(document).ready(() => {
  var level = 1;
  $('button').click(() => {
    level++;
    $("#question").text("Question " + level);
  });
});

  <h1 id="question">Question 1</h1>
  <form>
    <h3>What is your name?</h3>
    <textarea type="text" name="answer" rows="3" cols="50"></textarea>
    <br>
    <button class="btn btn-outline-primary btn-lg" type="submit" name="submit">Submit</button>
  </form>

推荐答案

即使您未编写但也已指定按钮，默认按钮的类型是提交".

The default type of button is submit even if you have not written but you also have specified it.

那么您的代码会怎样:

您的函数执行后，我们会看到结果并将其重新加载为type ='submit'行为.

Your function executes, we see the result and it reload as the type='submit' behaviour.

将其设置为type ='button'不会删除type属性.

Make it type='button' not removing the type attribute.

我能看到的另一件事是您不需要调用$(document).ready()，因为它不是HTML加载时所需的函数.

And another thing i can see is you dont need to call $(document).ready() because it is not a function which is needed as the html loads.

这篇关于无法使用JQuery更新内部HTML，它会立即返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！