动态添加/复制表单时绑定到表单提交事件

Question

我不确定如何绑定复制到（引导）弹出窗口中的表单的submit事件。

表单本身如下所示（简化）

<div style="display: none;" id="theFormContainer">
    <form action="" data-myformattribute="true" >
        @Html.HiddenFor(m => m.Prop1)
        @Html.LabelFor(m => m.Prop2)
        @Html.DropDownListFor(m => m.Prop2, MyElements)
        <input type="submit" value="Add" />
    </form>
</div>

页面上有几个（基于搜索结果）按钮，这些按钮将触发弹出框显示。

在我的javascript/jQuery（具体TypeScript）中，我在按钮单击事件处理程序中有以下代码

var $theButton = $(evt.currentTarget);
var $theContent = $("#theFormContainer");
var $addForm = $theContent.find("form[data-myformattribute='true']");
$addForm.submit(function(){alert("form submitted")});
$theButton.popover({
    html: true,
    placement: "bottom",
    content: $theContent.html(),
    title: "some awesome title"
}).popover("show");

$addForm.length 1.所以我想内容里面的表格已经找到了，不是吗？但是，永远不会触发/命中提交触发器。

如何绑定动态添加/复制到弹出框中的表单的submit事件？

我已经尝试在find调用之前用$theContent.clone()克隆内容，但在这里是一样的。

编辑 #1

我还尝试将提交按钮更改为<input type="submit" value="Add" id="AC08ACAB4BCD" />

在我的javascript/jQuery中，我以这种方式绑定点击事件

$("#AC08ACAB4BCD").on("click", function(){alert("button clicked");});

甚至按钮点击回调也永远不会被击中。我错过了什么？

Answer 1

由于它在页面加载时不是 DOM 元素，因此您可以使其生效：

var $theButton = $(evt.currentTarget);
var $theContent = $("#theFormContainer");
$theContent.delegate("form[data-myformattribute='true']","submit",function(){
  alert("form submitted")
});
$theButton.popover({
    html: true,
    placement: "bottom",
    content: $theContent.html(),
    title: "some awesome title"
}).popover("show");