处理具有相同内容的多个选项卡的最佳方法答案

【问题标题】：Best way to deal with multiple Tabs with the same content处理具有相同内容的多个选项卡的最佳方法
【发布时间】：2012-02-21 04:54:40
【问题描述】：

我正在使用 jQuery 选项卡（来自此示例：http://jqueryui.com/demos/tabs/#manipulation）并且我设置了它，以便创建的每个选项卡检索相同的数据以允许用户输入相同类型的多个记录（即允许用户输入多个课程）。一旦他们在这些不同的选项卡上完成了他们的课程输入，我如何能够单击保存并将数据发送到另一个页面以将其添加到数据库中。

标签的内容有 jQuery/JS，当我开始添加超过 1 个标签时，功能会中断 - 我认为这是因为相同的变量名称？避免这种情况的最佳方法是什么？通过将 .click(function() { jQuery 中的事件更改为 .live('click', function() { ?

那么当涉及将表单数据发布到另一个页面以将其添加到数据库时，您将如何循环呢？字段上会有 id 吗？

【问题讨论】：

标签： jquery ajax post tabs jquery-ui-tabs

【解决方案1】：

这里有几种可能性，如果没有代码示例，很难为您提供准确而全面的建议。然而：

页面中只能有一个 ID。即使您的选项卡是“隐藏的”，它们的内容也是 DOM 的一部分。如果您复制 ID 属性，则您的标记无效，JavaScript 将无法正确定位它们。
如果您使用类，jQuery 选择器将返回一个对象数组。在某些情况下（取决于函数），进一步的链接函数将只作用于数组的第一个成员，而不是所有成员。
如果通过 Ajax 返回新内容，那么您确实需要切换到委托侦听器而不是使用 .click()。你提到了.live()，但对于 jQuery 1.7+，这已被弃用；您应该使用带有委托语法的.on()。 API 文档将告诉您如何使用.on() 将.live() 替换为$(document).on()，但您最好选择更接近的祖先...$('#someContainer').on('click', '.target', function() {}); 其中#someContainer 和.target 只是示例...选择一个永远不会被破坏的容器选择器，以及一个有效的目标选择器。

【讨论】：

【解决方案2】：

检查选项卡的数量并相应地命名文本框 ID（txtCourse1、txtCourse2...）。您可以通过以下方式获得标签内容面板：

$(".ui-widget-content").each(function (){
   $(this).find("input")....
});

【讨论】：