按钮在html表单内不起作用，但在外部起作用

Question

嗨，我需要一些有关此html表单的帮助！ 我正在使用summernote（ https://summernote.org/examples/ ）制作公告板

首先，我将按钮（保存，编辑）放置在表单外部，并且效果很好。

单击编辑按钮显示编辑器

保存按钮保存更改并隐藏编辑器

但是，当我将其移入内部时，它将无法工作。 无法弄清楚为什么...表单中的元素是否独立于其余元素？

如果没有，我做错了什么？ 我应该怎么做才能使两个按钮存在于编辑器表单中？

有效的HTML：

<div class="container">
    <div class="page-header">
        <h1>Hello</h1>
    </div>
    <form class="edit-summit-form" method="post" action="      ">
            <div id="editor">

            </div>
    </form>
    <p>
        <!--<div id="summernote-result"></div>-->
    </p>
    <button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
    <button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
    <div class="click2edit">click2edit</div>
</div>

无效的HTML：

<div class="container">
    <div class="page-header">
        <h1>Hello</h1>
    </div>
    <form class="edit-summit-form" method="post" action="      ">
            <div id="editor">
              <button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
              <button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
              <div class="click2edit">click2edit</div>
            </div>
    </form>
    <p>
        <!--<div id="summernote-result"></div>-->
    </p>
</div>

Javascript：

    $(document).ready(function() {
        $('#summernote').summernote();
    });
    var edit = function() {
      $('.click2edit').summernote({focus: true});
    };
    var save = function() {
      var markup = $('.click2edit').summernote('code');
      $('.click2edit').summernote('destroy');
    };

Answer 1

您尚未解释什么“无效”，但我想您的表单正在提交，而您不希望这样做。 删除onclick内联JS，并让事件回调阻止表单提交：

$('#save').on('click', function(e) {
    e.stopPropagation();
    var markup = $('.click2edit').summernote('code');
    $('.click2edit').summernote('destroy');
    return false;
});