$.fn.submit() event don't trigger inside an <iframe&g

$.fn.submit() event don't trigger inside an <iframe>

本文关键字：trigger inside an iframe lt submit fn don event      更新时间：2023-09-26

简单地说，我有一个表单和一个字段。

<!-- inner.html -->
<form id="inner_form">
    <input type="text" name="username" />
    <input type="submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
    $('#inner_form').submit(function() {
        alert('Inner submit is triggered!');
    });
});
</script>
上面的代码很好：当我点击提交按钮时，它会触发#inner_form的提交事件，并提醒句子：Inner submit is triggered!

我的问题是，当我制作另一个页面，并在<iframe>中加载inner.html时：

<!-- outer.html -->
<iframe id="the_frame" src="inner.html">
</iframe>
<button id="outer_submit">Submit Inner</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
    $('#outer_submit').click(function() {
        // it don't trigger the inner submit() event!
        $('#the_frame').contents().find('#inner_form').submit();
    });
});
</script>
作为上面的代码（在snnipet中可能不太好用），我单击#outer_submit按钮，#inner_form确实提交了，但我在其中定义的事件没有触发！

为什么会发生这种情况？如果我想用外部动作很好地触发内部事件，我该怎么做呢？

虽然我不能回答"为什么"，但以下是我在测试时的一些发现：

用代替.submit()动作

$('#the_frame').contents().find('#inner_form input[type="submit"]').click();

将触发警报。不过，这并不是一个合适的解决方案，因为有更多的方法可以提交表格。不过，这表明事件并没有完全崩溃。所以我挖得更深。

我尝试在inner.html:中使用本机javascript事件，而不是jquery的.submit([function])绑定

<form id="inner_form" onsubmit="alert('hi')">

这实际上显示了警报。这也是：

$('#inner_form')[0].onsubmit = function() {
    alert('Inner submit is triggered!');
}

因此，jQuery设置和/或检测自己的submit()方法的方式似乎有问题。

再试一次：

$('#inner_form').on('submit', function() {
    alert('Inner submit is triggered!');
});

此还显示提交！

我的猜测是，由于某种原因，当inner.html中的事件被绑定时，它还不知道形式，即使绑定被包裹在一个隐含的document.ready事件中通过$(function(){ .. });。

至于这是如何以及为什么，我仍然不知道，但解决方法很简单：用.on()方法包装您的事件绑定。

相关文章：