Question

<form id="book-entry-form">
              <div class="form-group">

                <input type="hidden" class="form-control" name="book-id" id="book-id" readonly>
                <label for="book-name">Book Name</label>
                <input type="text" class="form-control" name="book-name" id="book-name" required="true">
                <label for="author-name">Author Name</label>
                <input type="text" class="form-control" name="author-name" id="author-name" required="true">
                <label for="select-category">Select Category</label>
                <select class="form-control" name="cat-select" id="select-category">

                </select>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
                <button type="submit" class="btn btn-primary" id="btn-submit">Submit</button>
              </div>
            </form>

按钮。

<!-- button div for edit and delete and book issue -->
              <div class="btn-group-vertical col-xs-4" role="group" aria-label="">
                <button type="button" class="btn btn-light" data-toggle="modal" data-target="#newBookEntryFormModal"
                  id="EditButton">
                  <img src="./node_modules/bootstrap-icons/icons/pencil.svg" alt="" srcset="">
                  Edit</button>
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#OnDeleteModal"
                  id="DeleteButton">
                  <img src="./node_modules/bootstrap-icons/icons/trash.svg" alt="" srcset="">
                  Delete</button>
              </div>

以上是书籍输入/更新的表格。这是提交的jQuery。我用选定的表格行自动填充表单字段。

$('#EditButton').on('click', function () {
                    $('#BookInfoModal').modal('hide');

                    //book entry form autofill 
                    $('#book-id').attr('type', 'text'); 
                    $('#book-id').val(rowEntries[0]);
                    $('#book-name').val(rowEntries[1]);
                    $('#author-name').val(rowEntries[2]);
                    $('#select-category').val(rowEntries[3]);

                    BookEntryUpdate($(this));    

                })



var BookEntryUpdate = function (obj) {

        if (obj.is('#EditButton')) {
            console.log("called by edit button");

            $('#book-entry-form').submit(function (event) {

                event.preventDefault();
                var formInfo = $(this).serializeArray();
                console.log(formInfo);

                return false;
            })
        }

.....

}

当我单击表的任何行后输入Submit时，它首先控制台记录一次日志，但是选择任何其他行并提交时，它控制台多次记录同一对象。例如：

第一次。

called by edit button index.js:146 (4) [{…}, {…}, {…}, {…}]

从第二次起。

2index.js:140 called by edit button index.js:146 (4) [{…}, {…}, {…}, {…}] index.js:146 (4) [{…}, {…}, {…}, {…}] index.js:146 (4) [{…}, {…}, {…}, {…}]

如何解决此问题？我希望只打印一次。

Answer 1

每次单击#EditButton都会在submit上为#book-entry-form添加一个新的事件处理程序。由于您只需要一个处理程序，因此只需将该代码移到BookEntryUpdate之外：

$('#EditButton').on('click', function () {
    $('#BookInfoModal').modal('hide');
    //book entry form autofill 
    $('#book-id').attr('type', 'text'); 
    $('#book-id').val(rowEntries[0]);
    $('#book-name').val(rowEntries[1]);
    $('#author-name').val(rowEntries[2]);
    $('#select-category').val(rowEntries[3]);
    BookEntryUpdate($(this));    
});

$('#book-entry-form').on('submit', function (event) {
    event.preventDefault();
    var formInfo = $(this).serializeArray();
    console.log(formInfo);
    return false;
});

var BookEntryUpdate = function (obj) {
    if (obj.is('#EditButton')) {
        console.log("called by edit button");
        // ...
    }
// ...
}

Answer 2

在这里给出我自己的答案。做了一些修复它的事情。虽然原因是@Nick所说的，而他的解决方案是修复它的一种方法，但是另一种解决方法是在继续当前提交之前解除对所有事件处理程序的绑定。

$('#book-entry-form').off('submit').on('submit', function (event) {
                event.preventDefault();
                var formInfo = $(this).serializeArray();
                console.log(formInfo);
                // ...
})

这为我解决了这个问题。希望对别人有帮助。

为什么表单提交多次输出相同的数据

2 个答案: