Jquery点击不提交表单[重复]答案

【问题标题】：Jquery on click to not submit the form [duplicate]Jquery点击不提交表单[重复]
【发布时间】：2020-10-23 09:27:15
【问题描述】：

我提供了一个非常简化的示例来说明我遇到的情况。

我有一个 ajax 迷你购物车，它是一种滑出形式。我有一个“关闭购物车”按钮，只是假设它隐藏了购物车，但 on.("click", 无法正确触发，因为它被包裹在表单元素中。由于它的构建方式，我无法将关闭按钮从表单中移除。

$("#open-slider").on ("click", () => {
  $("#slider").css("opacity","1");
});

$("#close-slider").on ("click", () => {
  $("#slider").css("opacity","0");
});

.header {
  width:100vw;
  height:60px;
  background-color:red;
}

#slider {
  height:100px;
  width:100px;
  background-color:blue;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">  
  <button id="open-slider">
    Open slider
  </button>
  <form id="slider">
    <div class="slider-header">
      <button id="close-slider"> close </button>
    </div>
  </form>
</div>

【问题讨论】：

你为什么首先在表单中使用提交按钮？

标签： javascript html jquery

【解决方案1】：

这是因为正在提交表单。您必须像这样阻止该事件：

$("#close-slider").on("click", e => {
  $("#slider").css("opacity","0");
  e.preventDefault();
});

Example fiddle.

请注意，在这种情况下，设置元素的不透明度并不是一个好方法。它还在，只是看不见而已。当元素的不透明度为 0 时，您仍然可以单击该元素。检查您的（未修改）示例，您可以在单击 open slider 按钮之前单击 close 按钮。你应该使用display:none 来隐藏它。

【讨论】：