0

我已经查看了关于此的所有问题，但找不到解决方案。我有一个通过 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 表单中显示了我的按钮 type=submit。负载到达提交行，addEntryDate 在 DOM 中，但是当我单击它时，它不会调用 addEntryDate() javascript 方法。我该怎么办？

4

2 回答 2

0

我的猜测：您的页面上已经有一个带有 ID 的元素，addEntryDate而 Firefox 不会将新元素识别为拥有该 ID，但 Chrome 已选择优先考虑它。

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

于 2013-04-09T21:16:25.313 回答
0

我不了解 Django，但乍一看呈现的代码，我认为它永远不会起作用。

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

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

如果有一些 jQuery/plain Javascript/等，请在重新渲染的页面中搜索。可能对您的表单提交负责的代码，并尝试在基于 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;   
        });
    });
于 2013-04-09T22:07:49.763 回答