按鈕在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;
});