Jquery 处理回调函数时提交导致严重问题

Question

我已经编写了一个程序，在为 行和列中的框数 取值后，我试图通过该程序创建网格。当我通过单击提交按钮提交表单时；我无法查看效果，因为它们会在几秒钟内消失。

现在，当我使用 click 事件处理程序 处理同一事件时，我能够看到我的所有效果。为什么 提交事件处理程序 失败而 单击事件处理程序 成功？ 按下提交按钮后我的输出在几秒钟内消失背后的逻辑是什么，而另一方面当我使用 单击事件处理程序?

所需的输出由下面的脚本给出 ->

    $(()=>{

        function grid(row, col){

            for(let i=1; i<=(row*col); ++i)
                $('.Grid').append($('<div></div>').addClass("Tile"));
        }

        $('button').click(()=>{
        
          $('.Grid').width($('#a').val() * 40); 
          $('.Grid').height($('#b').val() * 40); 

          grid($('#a').val(), $('#b').val());

        });

    });

    .Grid{
        font-size: 0px;
        border: 2px solid blue;
    }

    .Tile{
        height: 40px;
        width: 40px;
        border-radius: 6px;
        background-color: grey;
        display: inline-block;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="Grid"></div>

        <button>Display!</button>

        <form>
        columns -> <input id="a" type="number"> <br/>
      rows -> <input id="b" type="number"> <br/>
        </form>

瞬时（不需要）输出由以下脚本给出 ->

    $(()=>{

        function grid(row, col){

            for(let i=1; i<=(row*col); ++i)
                $('.Grid').append($('<div></div>').addClass("Tile"));
        }

        $('form').submit(()=>{
        
          $('.Grid').width($('#a').val() * 40); 
          $('.Grid').height($('#b').val() * 40); 

          grid($('#a').val(), $('#b').val());

        });

    });

    .Grid{
        font-size: 0px;
        border: 2px solid blue;
    }

    .Tile{
        height: 40px;
        width: 40px;
        border-radius: 6px;
        background-color: grey;
        display: inline-block;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="Grid"></div>

        <form>
        columns -> <input id="a" type="number"> <br/>
      rows -> <input id="b" type="number"> <br/>
      <input type="submit" value="submit">
        </form>

Answer 1

当您提交表单时，浏览器会在尝试“提交”数据时执行整页重新加载，通常是提交到表单的 action 属性中指定的位置。这是 100% 的预期行为。

您可以通过在提交表单时拦截事件来防止这种默认行为。在您的代码中，当您添加 submit 处理程序时，您可以访问底层 event 和一个名为 preventDefault().

的函数

当你调用它时，事件停止。这里有更多 in-depth 解释它是如何工作的：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

我已经用一个有效的例子更新了你的代码片段：

$(() => {

  function grid(row, col) {
    for (let i = 1; i <= (row * col); ++i)
      $('.Grid').append($('<div></div>').addClass("Tile"));
  }

  $('form').submit((event) => {
    
    event.preventDefault();
    
    $('.Grid').width($('#a').val() * 40);
    $('.Grid').height($('#b').val() * 40);

    grid($('#a').val(), $('#b').val());

  });

});

.Grid {
  font-size: 0px;
  border: 2px solid blue;
}

.Tile {
  height: 40px;
  width: 40px;
  border-radius: 6px;
  background-color: grey;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Grid"></div>
<form>
  columns -> <input id="a" type="number" /> <br/> rows -> <input id="b" type="number" /> <br/>
  <input type="submit" value="submit" />
</form>

Jquery 处理回调函数时提交导致严重问题

Jquery Submit is causing a serious issue while processing the callback function

html

javascript

css

jquery

node.js