本文探讨了在 simpledatatables 中嵌入表单时提交按钮失效的问题。通过分析其原因——simpledatatables 对默认事件的干扰，提出了一种基于 javascript/jquery 事件监听的解决方案。该方案通过将按钮类型改为普通按钮，并利用编程方式触发表单提交，从而在不影响表格功能的前提下恢复按钮的正常工作，确保数据提交的流畅性。
问题描述
在使用 simpleDatatables 库构建数据表格时，如果在表格的某一行中嵌入了包含 type="submit" 按钮的表单，可能会遇到一个常见问题：点击提交按钮后，表单没有任何响应，数据无法提交。初步排查可能发现，simpleDatatables 的初始化代码（例如 new simpleDatatables.DataTable(table1);）似乎阻止了表单的默认提交行为。一旦移除这部分代码，提交按钮便能正常工作，但随之而来的是表格功能失效。这表明 simpleDatatables 在处理表格元素时，可能无意中拦截或阻止了其内部表单的默认提交事件。
以下是可能导致此问题的HTML结构示例：
<table class='table table-striped' id="table1" style="text-align:center; font-size:0.8em;"> <thead> <tr> <th style="text-align:center;">#</th> <th style="text-align:center;">Product name</th> <th style="text-align:center;">Price</th> <th style="text-align:center;">Edit</th> <th style="text-align:center;">Remove</th> </tr> </thead> <tbody> <tr> <td class="col-sm-5 col-md-5">1</td> <td class="col-sm-1 col-md-1" style="text-align: center"> Apple </td> <td class="col-sm-1 col-md-1 text-center">3$</td> <td class="col-sm-1 col-md-1 text-center"> <form action="Product" method="post"> <input class="form-control" step="1" min="1" max="1000" value="1" type="number" name="qty"> <input type="hidden" name="order-id" value="1"> <!-- 提交按钮 --> <button type="submit" class="btn btn-outline-primary" name="update-item"> <i class="fa fa-edit"></i>edit </button> </form> </td> <td class="col-sm-2 col-md-2 "> <form action="Order?kkk" method="post"> <input class="form-control" step="1" min="1" max="1000" value="" type="number" name="qty"> <input type="hidden" name="order-id" value="1"> <!-- 提交按钮 --> <button type="submit" class="btn btn-outline-primary" name="remove-item"> <i class="fa fa-trash"></i>remove </button> </form> </td> </tr> </tbody></table>登录后复制
问题分析
simpleDatatables 或其他类似的 Javascript 表格库在初始化时，通常会遍历表格的 DOM 结构，并可能为其内部的元素（包括行、单元格等）附加自定义的事件监听器，或者在某些情况下，会阻止默认的浏览器行为以实现其特定的交互功能（如排序、分页、过滤等）。当一个 type="submit" 的按钮被点击时，浏览器会尝试触发其父级 <form> 元素的 submit 事件。如果 simpleDatatables 在其内部逻辑中使用了 event.preventDefault() 或 event.stopPropagation() 来处理某些事件，这就有可能无意中阻止了表单的默认提交行为。
解决方案：编程方式触发表单提交
为了解决 simpleDatatables 对表单提交事件的干扰，我们可以绕过浏览器默认的提交机制，转而使用 Javascript/jQuery 来显式地触发表单提交。这种方法的核心思路是将提交按钮变为一个普通的按钮，然后为其绑定一个点击事件，在该事件中手动触发其父级表单的提交。
步骤一：修改按钮类型
首先，将 type="submit" 的按钮改为 type="button"。这样做可以阻止浏览器在按钮被点击时自动尝试提交表单，从而避免与 simpleDatatables 的潜在冲突。
<!-- 修改前的按钮 --><!-- <button type="submit" class="btn btn-outline-primary" name="update-item"><i class="fa fa-edit"></i>edit</button> --><!-- 修改后的按钮 --><button type="button" class="btn btn-outline-primary" name="update-item"> <i class="fa fa-edit"></i>edit</button>登录后复制
同样地，对于“remove”按钮也进行此修改。
表单大师AI 一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。
74 查看详情 
步骤二：添加 Javascript 事件监听器
接下来，使用 Javascript（或 jQuery，如果项目中已引入）为这些普通按钮添加点击事件监听器。当按钮被点击时，事件监听器会找到其最近的父级 <form> 元素，并调用其 submit() 方法，从而以编程方式触发表单提交。
为了确保代码的健壮性，建议在文档加载完成后执行此脚本。
// 使用 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，可以使用原生 Javascriptdocument.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 树，找到距离当前元素最近的 <form> 祖先元素。这比使用固定的 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 上，即使内部的按钮是动态添加的，事件也能被正确捕获。
总结
当在 simpleDatatables 中遇到表单提交按钮失效的问题时，通常是由于表格库对默认事件的干预所致。通过将 type="submit" 按钮转换为 type="button"，并结合 Javascript/jQuery 的事件监听器，我们可以实现对表单提交行为的精确控制。这种编程方式的解决方案不仅能有效解决按钮失效的问题，还能确保表格功能的正常运行，为用户提供流畅的交互体验。在实际开发中，理解这类库与原生 HTML 行为之间的潜在冲突，并掌握相应的解决方案，对于构建稳定可靠的 Web 应用至关重要。
以上就是解决 simpleDatatables 中表单提交按钮失效问题的详细内容，更多请关注php中文网其它相关文章！
