Question

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

<!-- 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!

我的问题是，当我创建另一个页面时，在inner.html内加载<iframe>：

<!-- 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确实已提交，但我在其中定义的事件未触发！

为什么会这样？如果我想通过外部动作很好地触发内部事件，我怎么能得到它呢？

Answer 1

虽然我无法就“为什么”给出答案，但我在测试时发现了一些发现：

用

替换.submit()操作

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

将触发警报。但这并不是一个合适的解决方案，因为还有更多提交表单的方法。不过，它表明事件并未完全被打破。所以我深入挖掘。

我尝试在inner.html中使用原生javascript事件而不是jquery＆＃39; s .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 event到{ {1}}。

关于如何以及为什么我仍然在黑暗中，但修复很简单：用$(function(){ .. });方法包装你的事件。

$ .fn.submit（）事件不会在<iframe> </iframe>中触发

1 个答案: