Question

我在点击操作中向我的页面添加了一个表单。 HTML最初存在于脚本标记中并被注入页面。当我提交表格时，没有任何反应。

十多年这样做我没有看到这种行为，但也许我错过了这种情况。

<script type="text/html" id="modalcontent">
  <form id="myform" action="/" method="POST">
    <input type="text" name="whatever" />
    <button type="submit" class="btn">Submit</button>
  </form>
</script>

然后在jQuery点击绑定中我有：

//modal shows up just fine
$(document).on("submit", "#myform", function(){
    console.log("Delegated!") <- never see this
});
document.getElementById("modal").innerHTML = document.getElementById("modalcontent").innerHTML;
console.log($("#myform")); //<- confirms form element exists
$("#myform").on('submit', function (ev) {
    console.log("MADE IT!!") //<- but I never see this
    ev.preventDefault();
    return false;
}, false);

所以我在这里，将此提交直接绑定到表单，甚至不将此提交委托给文档。但是没有发生。回调中的console.log不会触发，但表单也不会自然提交。所以我认为这是我的HTML，或者由于某种原因浏览器不喜欢提交动态添加到页面的表单。

Answer 1

我对JQuery不太好，但是从false删除on() param会使它工作。不确定那个参数应该做什么......

document.getElementById("modal").innerHTML = document.getElementById("modalcontent").innerHTML;
console.log($("#myform").length); //<- confirms form element exists

$("#myform").on('submit', function (ev) {
    console.log("MADE IT jQuery!!") //<- but I never see this
    ev.preventDefault();
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/html" id="modalcontent">
  <form id="myform" action="/" method="POST">
    <input type="text" name="whatever" />
    <button type="submit" class="btn">Submit</button>
  </form>
</script>
<div id="modal"></div>

这有效的原因是jQuery.on，当以这种方式使用3个参数时，假设第三个是回调。它接受false作为

的简写等价物

function(){
    return false;
}

这就是为什么没有发生任何事情，包括委派的听众接受这个事件。

Answer 2

此外，只对表单元素触发提交，这就是为什么这段代码不起作用！

＆＃13;

//modal shows up just fine
$(document).on("submit", "#myform", function(){
    console.log("Delegated!") <- never see this
});

＆＃13;

添加了不提交的html表单

2 个答案: