如何使用jQuery動態添加輸入序列化表單？

Question

我已經閱讀了很多關於類似問題的問題，但我還是無法掌握它。

我有一個簡單的HTML表單就像

<form id="edit-items" name="edit-items" onsubmit="saveItems();"> 
    <input type="submit" value="Save"> 
    <input class="item" id="ei81" type="hidden" name="i[81]" value="1"> 
    <input class="item" id="ei124" type="hidden" name="i[124]" value="1"> 
</form> 

現有的兩個隱藏的輸入可以在文件加載設置由於事先保存。 現在我有圖像（種類的菜單）。如果他們點擊相應的隱藏的輸入被添加到形式：

<img id="i37" class="clickable-item" src="items/i37.gif" title="item name" onclick="addItem(37,1)" /> 

如addItem功能：

function addItem(id,n) { 
    var zitem = $("#e"+id); 
    if (0 in zitem) { 
    if (zitem.val() > 0) { 
     var newcnt = parseInt(zitem.val()) + n; 
     if (newcnt <= 0) { 
     zitem.remove(); 
     } 
     else { 
     zitem.val(newcnt); 
     } 
    } 
    } 
    else if(n == 1) { 
    var iform = $("#edit-items"); 
    iform.append("<input class=\"item\" id=\"e"+id+"\" type=\"hidden\" name=\"i["+id+"]\" value=\"1\">"); 
    } 
} 

這部分的所有作品正確，點擊圖片後，我的形式看起來像

<form id="edit-items" name="edit-items" onsubmit="saveItems();"> 
    <input type="submit" value="Save"> 
    <input class="item" id="ei81" type="hidden" name="i[81]" value="1"> 
    <input class="item" id="ei124" type="hidden" name="i[124]" value="1"> 
    <input class="item" id="ei37" type="hidden" name="i[37]" value="1"> 
</form> 

這正是我想要的。但是當點擊提交按鈕時，只有前兩個元素被提交（未被動態添加的元素）。

現在，我讀了很多關於.bind和.live處理程序的知識，但我明顯錯過了一些觀點。我試圖刪除上的圖像onclick屬性和給.live與它們結合，因爲它們是使新的輸入：

$(".clickable-item").live("click", function() { 
    addItem($(this).attr("id"),1); 
}); 

然而，ID沒有被轉印其是需要的，但（因此沒有正確的輸入被添加）。我知道.live不會將處理程序綁定到任何元素，而是綁定到事件。

是否有可能將已被點擊的元素傳遞給活動處理程序？ 圖像是否應該被.live觀看，還是應該綁定其他東西？

我在這裏學到的最後一件事形成另一個問題，即輸入應該被.live監視，因爲它們是動態添加的。但是我會附帶什麼樣的事件呢？輸入本身不被點擊。

我真的很感激任何幫助，因爲我正在琢磨着自己的腦袋，並開始迷失在那一張上。

由於提前， 保羅

Answer 1

關於live()^[docs]：this指點擊的元素，所以你可以用addItem(this, 1)傳遞給addItem。這部分代碼應該可以工作。

如果您不動態添加或刪除圖像，那麼沒有理由使用live。你可以使用click()^[docs]（是的，不要在HTML中使用onclick）。

---

但我看到了另一個問題：

的圖片ID是i37。 $(this).attr("id")將返回此值。

在你的addItem函數中，你取這個值並執行字符串連接。結果將是$("#ii37")（注意兩個i s）。

您創建的輸入元素將具有編號ii37而不是i37。

如果您更正此問題以便與您的示例中的其他元素（即i37）匹配，您將遇到問題，因爲您有幾個具有相同id（輸入元素和圖像）的元素。如果圖像位於層次結構中的輸入字段之前，則$("#i37")將始終選擇該圖像，並且您不能在圖像上調用.val()。

因爲我不知道代碼的總體目的和你想要做什麼，我不能給出任何建議如何改善這一點。也許只需更改圖像的前綴和輸入字段ID即可。

---

我瞭解到，.live不處理程序綁定到任何元素，但該事件。

這是不正確的。 .live()將事件處理程序綁定到文檔根目錄。事件如果不被取消，會冒泡DOM樹，所以它們最終會到達根。在那裏，檢查event.target^[docs]屬性以確定被單擊的元素。