为什么我的提交<LI>始终提交列表中的第一项？

Question

我的代码构建了一个类似于以下的动态列表：

form = "";
form+= "<li>";
form+= "<form id='formid_" + itemno + "' class='form' method='post'>";
form+= " some options go here ";
form+= "<button type='submit' class='selection'>Select This Option</button>";
form+= "</form>";
form+= "</li>";
form+= "<li>";
form+= "<form id='formid_" + itemno + "' class='form' method='post'>";
form+= " some other options go here ";
form+= "<button type='submit' class='selection'>Select This Option</button>";
form+= "</form>";
form+= "</li>";
$("#my-output-div").append(form);

问题是，当按下提交按钮时，我需要使用正确的列表项表单ID来获得正确的选择，但该表单ID是动态的。我知道我可以使用var formID = $(this).parent().attr("id");在点击时获得表单的ID，但实现这一点的最佳方法是什么，以确保我提交的是实际选择的列表项？无论单击了哪个提交按钮，每隔一次尝试都会抓住列表中的第一个列表项。我知道不能使用类：

$(document).on('submit', '.locationForm', function(e) {
e.preventDefault();
// do something 
});

Answer 1

如果在单击时发送事件对象会怎样？然后，您可以从事件对象中提取单击的元素数据吗？

https://api.jquery.com/event.data/

这个链接能解释更多吗？我个人将Angular用于动态web应用程序，但这也应该有效。

编辑：

该代码是一个示例：

$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});

我从Stackoverflow上的这篇文章中得到了它获取触发事件的元素的ID