陣列提交動態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」關鍵字已被覆蓋以引用加號按鈕，而不是我的輸入字段。