Question

我已经查看了有关此问题的所有问题，但无法找到解决方案。我有一个通过AJAX调用附加到DOM的表单，并且在成功完成后，我将表单提交连接到javascript方法。适用于Chrome。不在Firefox 20或21中调用我的javascript方法。

    $("#dateList").load("/chargeback/cb_timeentry/te_list/" + empId, function() {
        $("#addEntryDate").submit(function() {
            addEntryDate();
            return false;   
        });
    });

由Django呈现的表单看起来像这样（在FF和Chrome中）：

<div id="addOrDelete">
    <input id="addEntryDateButton" type="submit" value="+">
    <input id="deleteEntryDateButton" type="submit" disabled="true" value="-">
    <table>
        <tbody>
            <tr>
                <form id="addEntryDate" class="uiText" method="get" action="."></form>
                <form id="deleteEntryDateForm" class="uiText" method="get" action="."></form>
            </tr>
        </tbody>
     </table>
 </div>

Django模板中编写的表单如下：

<div id="addOrDelete">
<table>
    <tr>
        <form id="addEntryDate"  class="uiText" action="." method="get">
            <input id="addEntryDateButton" type="submit" value="+" disabled="true" />
        </form>
        <form id="deleteEntryDateForm" class="uiText" action="." method="get">
            <input id="deleteEntryDateButton" type="submit" value="-" disabled="true"/>
        </form>
        </tr>
</table>
</div>

加载调用在Firefox中正常工作，正确的HTML在addEntryDate表单中显示我的按钮类型=提交。加载命中提交行，addEntryDate在DOM中，但是当我单击它时，它不会调用addEntryDate（）javascript方法。我该怎么办？

Answer 1

我的猜测：您的网页上已经有一个ID为addEntryDate的元素，而Firefox并不认为新的元素拥有ID，但Chrome已选择优先使用。

不要编写导致两个具有相同ID的元素的代码 - 并注意导致它的动态DOM操作，使用.load()很容易犯错误。

Answer 2

我不知道Django，但是在第一次看到渲染的代码时，我认为它永远不会起作用。

input submit应位于form元素内，以便提供默认（支持浏览器）表单提交。但是如果它仍然有效，那么Django可能会添加一些将mouseclick javascript事件链接到正确的表单subbmition的javascript代码。

很有可能，因为Django模板呈现的表单有效，而您（通过AJAX）创建的表单无法正常工作。

在重新编译的页面中搜索是否存在一些jQuery / plain Javascript / etc.代码可能对您的表单子代码负责，并尝试在基于AJAX的表单中复制它。

如果它不存在那么第一个表格甚至不应该首先提交，我也不知道它为什么会在Chrome中运行。

但至少你可以写简单的jQuery来做到这一点：

    $("#dateList").load("/chargeback/cb_timeentry/te_list/" + empId, function() {
        $(document).on("click", "#addEntryDateButton", function(e) {
            e.preventDefault();
            e.stopPropagation();
            $("#addEntryDate").submit();
        });

        $("#addEntryDate").submit(function() {
            addEntryDate();
            return false;   
        });
    });

jQuery表单提交无法在Firefox中运行

2 个答案: