本文旨在解决在使用Ajax动态填充表格时，由于选择器不精确导致Ajax请求在所有行上重复执行的问题。通过修改jQuery选择器，实现每个表格行独立触发和处理Ajax请求，确保数据的准确性和用户体验。本文将提供详细的代码示例和步骤，帮助你理解和解决此类问题。
在动态生成的表格中使用Ajax，一个常见的问题是事件绑定到多个元素上，导致不必要的重复请求。例如，当你在一个表格的每一行都有一个下拉选择框，并且希望根据选择的内容动态更新另一个下拉框时，如果选择器不精确，更改一个选择框的值可能会触发所有行的Ajax请求。以下是如何解决这个问题的详细步骤：
1. 问题分析
原代码中，.category-dropdown 选择器绑定了 change 事件，并且在 success 回调中，使用 .sub-category-dropdown 选择器更新所有子类别下拉框。这导致每次更改任何一个类别下拉框，所有的子类别下拉框都会被更新，从而产生了重复执行的问题。
2. 解决方案：精准定位子类别下拉框
关键在于找到当前触发 change 事件的类别下拉框所在行的子类别下拉框。可以使用 jQuery 的 closest() 和 find() 方法来实现：
$(this).closest(“tr”)：从当前触发事件的元素（.category-dropdown）开始，向上查找最近的 元素，即当前行。.find(“.sub-category-dropdown”)：在当前行内查找类名为 .sub-category-dropdown 的元素，即当前行的子类别下拉框。
3. 修改后的代码
$(document).ready(function() { $('.category-dropdown').on('change', function() { var category_id = this.value; // 精准定位当前行的子类别下拉框 const subSelect = $(this).closest("tr").find(".sub-category-dropdown"); $.ajax({ url: "fetch-subcategory-by-category.php", type: "POST", data: { category_id: category_id }, cache: false, success: function(result) { // 只更新当前行的子类别下拉框 subSelect.html(result); } }); });});
代码解释：
const subSelect = $(this).closest(“tr”).find(“.sub-category-dropdown”);: 这一行代码是关键。它首先使用 $(this) 获取当前触发 change 事件的 .category-dropdown 元素。然后，closest(“tr”) 向上查找最近的 父元素，也就是包含当前类别下拉框的表格行。最后，find(“.sub-category-dropdown”) 在该表格行内查找类名为 .sub-category-dropdown 的元素，即当前行的子类别下拉框。subSelect.html(result);: 在Ajax请求成功后，使用 subSelect 这个变量，它现在指向的是当前行的子类别下拉框。将服务器返回的结果 result 填充到这个下拉框中，从而只更新当前行的子类别下拉框，避免了影响其他行。
4. 完整示例
结合 HTML 和 JavaScript，一个完整的示例可能如下所示：
| Category | Item |
|---|---|
| Select Category <option value=""> | |
| Category | Item |
| Select Category <option value=""> | |
注意：
确保引入 jQuery 库。fetch-subcategory-by-category.php 文件需要根据 category_id 返回对应的子类别选项的 HTML 代码。
5. 总结
通过使用 $(this).closest(“tr”).find(“.sub-category-dropdown”)，我们能够精准地定位到当前行对应的子类别下拉框，从而避免了不必要的重复请求，提高了程序的效率和用户体验。这个技巧在处理动态生成的表格数据时非常有用，特别是在需要对每一行进行独立操作的场景下。
以上就是解决Ajax在表格行中重复执行的问题：精准定位选择器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1571624.html
微信扫一扫 
支付宝扫一扫 
