Question

我有表单，用户可以使用jQuery显示/隐藏它。

问题：用户点击显示/隐藏（箭头图标）表单提交后，只能执行一次。我的意思是在我点击表单提交按钮后不工作。

我找到的内容：似乎网址中有'＃'与此问题相关。

如何解决这个问题？

Jsfiddle：https://jsfiddle.net/damithruwan1234/t795ewx3/2/（你不能从中测试它，因为jsfiddle不允许使用get方法）

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <script>
$(document).ready(function(){

$("#hide_search").click(function(){
  $("#search_panel").hide(1000);
    $("#show_search").show();
    $("#hide_search").hide();
});

$("#show_search").click(function(){
  $("#search_panel").show(1000);
    $("#show_search").hide();
    $("#hide_search").show();
});
});
</script>


</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <div class="col-sm-8 col-sm-offset-2" id="search_panel">
  <form action="">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="text" class="form-control" id="email" value="dfdf" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="text" class="form-control" id="pwd" value="ssds" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <input type="submit" class="btn btn-info" value="SEARCH">
  </form>
  </div>
</div>

<div class="col-sm-8 col-sm-offset-2">
 <a href="#" id="hide_search">
 <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa fa-angle-up fa-stack-1x fa-inverse"></i>
</span>
</a>

 <a href="#" id="show_search" style="display: none;">
 <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa fa-angle-down fa-stack-1x fa-inverse"></i>
</span>
</a>
 </div>

</body>
</html>

Answer 1

在隐藏/显示点击事件上添加preventDefault()。使用以下修改过的脚本。（实际问题是，当您点击隐藏/显示按钮时，它会在网址上添加“＃”;这就是无法使用＆＃39; Get＆＃39;方法提交表单的原因

$("#hide_search").click(function(e){
e.preventDefault();
  $("#search_panel").hide(1000);
    $("#show_search").show();
    $("#hide_search").hide();
});

$("#show_search").click(function(e){
e.preventDefault();
  $("#search_panel").show(1000);
    $("#show_search").hide();
    $("#hide_search").show();
});

Answer 2

您应该更改隐藏/显示按钮href属性，如下所示

<a href="javascript:void(0);"

或者你可以在jquery中做这样的事情，

$('a[href="#"]').on('click', function(e){
   e.preventDefault();
});

它可能因为散列更改而无法正常工作。如果你使用这种方式哈希没有改变。

表单提交按钮不起作用使用jQuery隐藏/显示功能时

2 个答案: