首页 > 解决方案 > jQuery,消失的元素

问题描述

$(document).ready(function() {
  $("#lastinput").click(function() {
    $("#blank").html("text to display");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>

  <div id="blank"> </div>
  <div id="login">
    <form>
      <label for="email">Email</label>
      <input type="text" name="email" placeholder="eg. yourname@gmail.com" id="email"><br>

      <label for="phone">Telephone</label>
      <input type="text" name="phone" placeholder="eg. 123456789" id="phone"><br>

      <label for="password">Password</label>
      <input type="password" name="password" placeholder="password" id="password"><br><br>

      <input id="lastinput" type="submit" value="Log in">
    </form>
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

我有一个名为 id = "blank" 的显示元素的问题浏览器在 0.1 秒上显示它然后消失,我搜索了一天的解决方案,仍然找不到错误提前感谢您的帮助。

标签: jqueryhtml

解决方案


您的提交按钮位于表单内,因此一旦您提交该表单,它就会返回一个 url 以重定向到。由于您没有提供一个,它会重定向到一个空白页面。

您需要从表单中删除提交按钮或将表单转换为 Ajax 表单以提交信息并更新页面而不刷新它:

$("#lastinput").click(function(event) {
    $.ajax({
        url: 'url here',
        beforeSend: function () {
            $("#blank").html("text to display");
        },
        success: function() {},
        }
    });
});

推荐阅读