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将其传递给addItem(this, 1)。这部分代码应该可以工作。

如果您不动态添加或删除图像，则没有理由使用live。您可以使用click() ^[docs]（是的，请勿在HTML中使用onclick。

但我发现另一个问题：

图片ID为i37。 $(this).attr("id")将返回此值。

在addItem函数中，您可以获取此值并执行字符串连接。结果将为$("#ii37")（请注意两个i）。

您创建的输入元素的ID为ii37，而不是i37。

如果你更正它以匹配你的例子中的其他元素（即i37），你将遇到问题，因为你有几个具有相同id的元素（输入元素和图像）。如果图像位于层次结构中的输入字段之前，则$("#i37")将始终选择图像，而您无法在图像上调用.val()。

由于我不知道代码的总体目的是什么以及您想要做什么，我不能提出任何建议如何改进。也许仅仅更改图像的前缀和输入字段ID就足够了。

我了解到.live不会将处理程序绑定到任何元素，而是绑定到事件。

这是不正确的。 .live()将事件处理程序绑定到文档根目录。事件，如果没有取消，冒泡DOM树，所以他们最终到达根。在那里，检查event.target ^[docs]属性以确定被单击的元素。

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

1 个答案: