jQuery表单提交在Firefox中不工作

我已经看过所有关于此问题的SO，并且找不到解决方案。我有一个表单通过AJAX调用附加到DOM，成功完成后，我将表单提交连接到JavaScript方法。在Chrome中运行良好。不叫我的JavaScript方法在Firefox 20或21jQuery表单提交在Firefox中不工作

$("#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表单中。 load命中提交行，addEntryDate在DOM中，但是当我点击它时，它不会调用addEntryDate（）javascript方法。我该怎么办？

来源

2013-04-09 Shawn

请提供您的表单代码。执行整个过程时，Firefox控制台是否有错误？编辑 – Xeon 2013-04-09 21:05:40

以显示表单代码。在控制台中没有错误或警告 – Shawn 2013-04-09 21:25:55

我不知道Django，但在第一次看到呈现的代码，我认为它应该永远不会工作。

input submit应该在form元素内，以提供默认（浏览器支持）表单提交。但是，如果它无论如何工作，那么Django可能会添加一些JavaScript代码，将mouseclick javascript事件链接到正确的表单子对象。

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

在重新编辑的页面中搜索是否存在一些jQuery /纯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; 
     }); 
    });

来源

2013-04-09 22:07:49 Xeon

Django不会向页面添加任何脚本 - 它是一次呈现的静态html，但事实证明HTML呈现是问题。删除表单并使用普通香草javascript onclick功能可解决此问题。我会接受你的答案，因为它正确地将html标识为问题 – Shawn 2013-04-10 14:37:47

我的猜测是：你已经在页面上有一个ID为的元素，而Firefox并不认为新元素拥有该ID，但Chrome选择了优先。

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

来源

2013-04-09 21:16:25 drquicksilver

我以前就知道这一点。不是在这种情况下发生了什么。 – Shawn 2013-04-09 21:20:11

jQuery表单提交在Firefox中不工作

回答

相关问题