使用 jquery 委托单击提交按钮不执行任何操作答案

【问题标题】：Clicking submit button does nothing using jquery delegate使用 jquery 委托单击提交按钮不执行任何操作
【发布时间】：2014-04-09 01:38:26
【问题描述】：

我正在尝试在通过 javascript 加载的网站中使用表单（来自 ajax 调用的结果），提交按钮调用发送 ajax 调用的委托函数。

这在 Chrome 和 IE 中完美运行，但在 firefox 中单击按钮什么也不做，也没有 javascript 错误或任何东西。

2014 年 4 月 14 日编辑：在没有更改代码之后，这也刚刚开始在 chrome 中发生

表单已构建：

tr += "<form  method='POST' data-opid='"+resultArr[i].columns.number+"'
      class='update_form' action='' name='form"+resultArr[i].columns.number+"'>";

tr += "<td><input type='submit' class='update' value='update'></td></form>";

委托功能启动：

jQuery(document).delegate(".update_form", "submit", function(e){
   alert("in the delegate");

但警报永远不会在 firefox 中触发。

我有一个<a class='displayopp' href='../partner_detail/view/" + resultArr[i].columns.internalid.internalid + "'> 完美地使用了jQuery(document).delegate(".displayopp", "click", function(e){。

我一直在查看代理是否存在任何 Firefox 问题，但一直找不到任何东西。我注意到另一个加载了 javascript 的表单按“enter”提交将无法正常工作，但除此之外我不知道在哪里看。任何指针将不胜感激。

我已尝试将我的代码最小化为仅包含相关信息，因为该文件有 500 行长（出于各种我不满意的原因），所以如果我没有提供足够的信息，请告诉我。

如前所述，问题仅在 Firefox 中，其他一切正常。

【问题讨论】：

如果您使用的是 jQuery 1.7 或更高版本，我建议您改用 .on()（查看有关如何迁移的文档），但我不确定这是否能解决问题。大多数情况下，委托事件处理程序没有被调用，这是因为事件没有冒泡（尽管我认为submit 确实如此），或者另一个处理程序在到达容器之前调用了stopPropagation（document 在你的案例）。
从记忆中，我首先使用on() 构建了这个，但是因为表单是在页面加载后创建的，所以它不会找到它（这有意义吗？我可能正在考虑另一个变化，我只知道因为这个原因我们改变了一些东西，我们在一个阶段尝试了on()）最大的问题是我去年年底构建的，不记得代码的所有迁移。
.on() 的一个版本可以这样工作，只要您使用至少 1.7：$('container').on('event', 'selector', function() {...})。见direct and delegated events。但同样，您可以尝试这样做，但我怀疑这是问题所在。
使用 jQuery(document).on("submit", ".update_form", function(e){ 并且没有变化
补充说大约 4-5 小时前，Chrome 中也出现了这个问题，包括其他表单中的“按“回车”提交”。完全相同的行为，该代码副本数周内没有更改。

标签： javascript jquery forms firefox delegates

【解决方案1】：

我发现了错误，它不在我给你的代码中，抱歉。表单已声明：

<table>
    <tr>
        <form>
            <td>form input</td>
            <td>form input</td>
            <td>form submit</td>
        </form>
    </tr>
</table>

我把它改成了：

<form>
    <table>
        <tr>
            <td>form input</td>
            <td>form input</td>
            <td>form submit</td>
        </tr>
    </table>
</form>

一切正常！

一旦我知道问题出在哪里，我就找到了一个page，上面写着

表格和表单可以任意嵌套。但是，如果您将表格放入表格中，则每个表格必须完全包含在单个表格单元格中（实际上是一个 TD 元素）。因此，表格中的每一个都是完全独立的。

所以这是一个订单问题，IE 和 chrome 本来可以工作，因为它们很棒，我不想说 IE 继续工作，因为它很棒，所以我不会说。

【讨论】：