解决 simpleDatatables 中表单提交按钮失效问题

解决方案：编程方式触发表单提交

为了解决 simpleDatatables 对表单提交事件的干扰，我们可以绕过浏览器默认的提交机制，转而使用 JavaScript/jQuery 来显式地触发表单提交。这种方法的核心思路是将提交按钮变为一个普通的按钮，然后为其绑定一个点击事件，在该事件中手动触发其父级表单的提交。

步骤一：修改按钮类型

首先，将 type="submit" 的按钮改为 type="button"。这样做可以阻止浏览器在按钮被点击时自动尝试提交表单，从而避免与 simpleDatatables 的潜在冲突。

    edit

同样地，对于“remove”按钮也进行此修改。

Glean

Glean是一个专为企业团队设计的AI搜索和知识发现工具

下载

步骤二：添加 JavaScript 事件监听器

接下来，使用 JavaScript（或 jQuery，如果项目中已引入）为这些普通按钮添加点击事件监听器。当按钮被点击时，事件监听器会找到其最近的父级

为了确保代码的健壮性，建议在文档加载完成后执行此脚本。

// 使用 jQuery 绑定事件
$(document).ready(function() {
    // 监听所有 name 为 "update-item" 的按钮的点击事件
    $('[name="update-item"]').on('click', function() {
        // 找到当前点击按钮的最近的父级表单，并提交它
        $(this).closest('form').submit();
    });

    // 监听所有 name 为 "remove-item" 的按钮的点击事件
    $('[name="remove-item"]').on('click', function() {
        // 找到当前点击按钮的最近的父级表单，并提交它
        $(this).closest('form').submit();
    });
});

// 如果不使用 jQuery，可以使用原生 JavaScript
document.addEventListener('DOMContentLoaded', function() {
    const updateButtons = document.querySelectorAll('[name="update-item"]');
    updateButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 遍历父元素直到找到 form
            let parentForm = this.closest('form');
            if (parentForm) {
                parentForm.submit();
            }
        });
    });

    const removeButtons = document.querySelectorAll('[name="remove-item"]');
    removeButtons.forEach(button => {
        button.addEventListener('click', function() {
            let parentForm = this.closest('form');
            if (parentForm) {
                parentForm.submit();
            }
        });
    });
});

注意事项：

• 表单选择器： $(this).closest('form') 是一个非常实用的 jQuery 方法，它能够向上遍历 DOM 树，找到距离当前元素最近的 祖先元素。这比使用固定的 ID（如 $('#myForm')）更具通用性，尤其是在表格中存在多个动态生成的表单时。
• 事件委托： 如果表格内容是动态加载的（例如通过 AJAX），或者 simpleDatatables 重新渲染了部分 DOM，直接绑定事件可能失效。在这种情况下，可以考虑使用事件委托来绑定事件，例如：

  $('#table1').on('click', '[name="update-item"]', function() {
      $(this).closest('form').submit();
  });
  $('#table1').on('click', '[name="remove-item"]', function() {
      $(this).closest('form').submit();
  });

  这将把事件监听器绑定到表格容器 #table1 上，即使内部的按钮是动态添加的，事件也能被正确捕获。