form-submit – 如何使用jQuery动态添加输入序列化表单？

我有一个简单的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监视,因为它们是动态添加的.但是我会附上什么样的事件呢？未单击输入本身.

我真的很感激任何帮助,因为我正在开始迷失方向并开始迷失在那一方面.

提前致谢,
保罗