阵列提交动态HTML不太知道究竟如何称谓这个问题，但这里是我遇到的问题：对于使用jQuery
我需要能够提交一个数组或一个链表数据通过HTML表单。由于该阵列可以是可变长度的我有两个选项：
- 使用某种形式的定界符（例如，在列表中以逗号分隔的项目）
- 具有多个输入（每个阵列项），为动态生成的新项目需要添加
我想追求的第二个选项，但我认为，由于这个特殊的项目将有很多这样的“阵列输入”，我应该创建一个jQuery插件，这样我可以更容易以未来的形式实现此功能。
当我在这方面工作时，我也一直在为多种输入类型添加功能，选择，选择倍数（通过分隔符）和链接的输入（例如 - 有两个文本输入用于“名”和“名称”必须提交一对）
我已经得到了我怎么想它应该工作的基本布局：
(function($) { // Self-calling anonymous function to avoid namespace collisions or compatibility issues
$.fn.dynamicList = function(options) { // jQuery plugin definition
/* Set up default options here */
defaults = {
option1: "value1",
option2: "value2"
};
var options = $.extend(defaults, options);
/* Step 1. Add a jQuery-UI plus icon to the DOM */
/* Note: I have an option to specify where this icon should go in the DOM. It defaults right after the last input */
plus = $("<span>").addClass('jquery-ui-classes');
this.last().after(plus);
/* Step 2. Add a table to the DOM for displaying added values */
/* Note: I have an option to specify where this table should go in the DOM. It defaults right after the plus icon */
plus.after(table);
/* Step 3. Add a handler for our plus button */
this.delegate(plus, 'click', function() {
/* Read the inputs, add their values to the table, empty the inputs */
/* Also, the last column of the table contains a minus button */
/* This is where I THOUGHT my first issue was.... */
minus = $("<span>").addClass('jquery-ui-classes');
table.append(row).append(minus);
});
/* Step 4. Add a handler for our minus button */
/* Since the minus is created within the plus handler we can't use "minus" here */
/* Instead I use a class name to locate it */
this.delegate('.jquery-ui-minus-class', 'click', function() {
/* Remove the relevant row from the table */
$(this).parents('tr').remove();
});
/* Step 5. Add our submit handler */
this.parents('form').first().submit(function() {
/* We want all of the data in the table to be submitted with the form */
/* Therefore we create an input per cell and name it accordingly */
/* The name is just the name of the original input plus "[]" to make it an array */
/* This is where I thought my second problem was */
});
return this; // Maintain chain-ability
};
)(jQuery);
该代码被称为对您希望与更换输入动态列表。如果您选择了多个输入，则它们将成为链接数据的列表（例如姓氏和名字示例）。如何调用这方面的一个例子是以下几点：
<html>
<head>
<!-- Include jQuery and my dynamic list library here -->
<script>
$('#fn,#ln').dynamicList();
</script>
</head>
<body>
<form>
<input id="fn" name="first_name" />
<input id="ln" name="last_name" />
</form>
</body>
</html>
这将创建一个可以在其中输入一个名字和姓氏的动态列表，然后点击加号按钮（现在的或根据权根据你的CSS规则输入姓氏），它将向包含一列中的第一个名字，另一个中的姓氏以及最后一个减号按钮的表格添加一行。您可以继续键入名称并按下此加号按钮，表格将无限延伸。在提交表单时（通过提交按钮或任何其他方法）表格单元格应该成为输入。
我认为我遇到的第一个问题是在加号处理程序中。由于我位于通过单击加号按钮调用的函数中，因此“this”关键字现在引用加号图标的DOM元素。我无法获取输入的值以将它们添加到表格中。提出的一种解决办法我只好是创建一个全局变量，它是对象的副本上的动态列表函数被调用，像这样：
.
.
.
/* Step 2. Add a table to the DOM for displaying added values */
/* Note: I have an option to specify where this table should go in the DOM. It defaults right after the plus icon */
plus.after(table);
var dynamicList = this;
/* Step 3. Add a handler for our plus button */
this.delegate(plus, 'click', function() {
/* Read the inputs, add their values to the table, empty the inputs */
/* Also, the last column of the table contains a minus button */
/* This is where I THOUGHT my first issue was.... */
for(i = 0; i < dynamicList.length; i++) {
// dynamicList.get(i) will give us each input in order
}
minus = $("<span>").addClass('jquery-ui-classes');
table.append(row).append(minus);
});
.
.
.
我对这种担忧的是，如果我实例化多个动态列表他们会相互覆盖。这是真的？如果是这样，我该如何克服这一点？
我认为我遇到的第二个问题类似。在提交表单时，我需要找到表格以获取要提交的值并找到输入以获取应提交它们的名称。
然而，当玩弄代码来尝试修复它时，我比预期的要早得多。
Uncaught TypeError: Object [object Object] has no method 'replace'
jquery-1.6.2.min.js:16
f.each.f.fn.(anonymous function) jquery-1.6.2.min.js:17
f.fn.extend.delegate jquery-1.6.2.min.js:17
$.fn.dynamicList jquery.dynamicList.js:76
(anonymous function) test.php:16
f.extend._Deferred.e.resolveWith jquery-1.6.2.min.js:16
e.extend.ready jquery-1.6.2.min.js:16
c.addEventListener.B jquery-1.6.2.min.js:16
在我的动态列表代码76行看着，它的下面一行：
this.delegate(plus, 'click', function() {
我可以不叫，因为“这”指的是超过一个jQuery对象.delegate()？或者我不能拨打.delegate()，因为“this”不是加号图标的父元素？一旦这个问题得到解决，我该如何解决我的其他两个问题？
编辑 -
我修改了标题，我发现上线76解决我的问题，我不知道究竟是如何.delegate()的作品，因为最初我想：
this.first().parent().delegate(plus, 'click', function() {
和它仍然对我感到不安。然后，我意识到，我可以只使用.click()功能，而不是（我还挺疯玩）
plus.click(function() {
创建每行减号按钮，当我用类似的逻辑。在创建减号按钮之后并在将其插入DOM之前，我添加了minus.click()，这为我节省了在代码中任何地方使用.delegate()的麻烦。
仍然不确定如何从加号处理程序中的输入字段获取值，因为此处的“this”关键字已被覆盖以引用加号按钮，而不是我的输入字段。