在表单中使用 jquery 操作

Question

我在一个表单中包含两个按钮。其中一个在单击时添加一个类，而另一个删除添加的类。

<form action="newreply.php?do=postreply&amp;t=15" method="post" id="quickreply">
<!-- OTHER CODE HERE -->
<div class="toolbar-group pull-right editor-mode-dive-only">
  <button tabindex="-1" class="btn btn-default" title="Exit distraction-free mode." id="editor-button-exitdive">
    <i class="fa fa-compress"></i>
  </button>
</div>
<div class="toolbar-group pull-right editor-mode-dive-hidden">
  <button tabindex="-1" class="btn btn-default" title="“Dive” into distraction-free writing mode." id="editor-button-dive">
    <i class="fa fa-expand"></i>
  </button>
</div>
<!-- OTHER CODE HERE -->
<button class="btn btn-primary" type="submit" accesskey="s" name="sbutton" id="qr_submit" onclick="clickedelm = this.value">Post <span class='loading'></span></button>
</form>

这些按钮的jQuery代码如下。

$('#editor-button-dive').click(function() {
  $("#vB_Editor_QR").addClass("editor-mode-dive");
});

$('#editor-button-exitdive').click(function() {
  $("#vB_Editor_QR").removeClass("editor-mode-dive");
});

每次点击展开按钮都会触发提交按钮，我...

• 观察控制台是否有任何错误。
• 尝试重命名变量。
• 尝试移动按钮。

我似乎无法获得不提交表单的按钮，而只是简单地添加类。这应该很简单，但已经成功地变成了一个巨大的头痛。如果需要，我可以发布更多代码，但我觉得问题出在所提供代码的某个地方。

你知道我做错了什么吗，或者知道我可以通过其他方式在点击时将类添加到 div 吗？

Answer 1

您的两个按钮都有id="editor-button-dive"。 ID 必须是唯一的。第二个按钮的 id 应该是id="editor-button-exitdive"。

要停止提交按钮，请将它们移出表单。

如果您出于某种原因需要将它们保留在表单中，您可以像这样阻止默认提交事件：

$('#editor-button-dive').click(function(e) {
  e.preventDefault();
  $("#vB_Editor_QR").addClass("editor-mode-dive");
});