Question

您好我需要这个html表格的帮助！我正在使用summernote制作公告牌（https://summernote.org/examples/）

首先，我在表单外部创建了按钮（保存，编辑），它完美无缺。

And the save button saves the change and hides the editor

然而，当我把它移到里面时它不起作用。无法弄清楚为什么......形式中的元素是否独立于其他元素？

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

有效的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;
});

按钮在html表单中不起作用，但它在外面工作

1 个答案: