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 - 事件？

我已尝试在$theContent.clone()来电之前使用find克隆内容，但此处也是如此。

编辑＃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");

在动态添加/复制表单时绑定以形成提交事件

1 个答案: