Jquery 表单提交只工作一次

Question

我正在制作一个网页，显示在表格中搜索某些搜索词的频率。该表上方是 2 个单选按钮，用户可以通过这些按钮选择是否要查看不同的搜索结果或所有结果。

当使用这个javascript时：

$(function() {
    $('.distinct_radio').change(function() {
        console.log("submit distinct_radio");
        this.form.submit();
    });
});

它工作正常。我可以一遍又一遍地切换，正确切换表值。但是，如果我使用这个 javascript：

$(function() {
    $('.distinct_radio').change(function() {
        console.log("submit distinct_radio");
        $('form#searchTermForm').submit();
    });
});

表单定义为

<form id="searchTermForm" action="/searchterms.php" method="POST">
    <div class="configDiv"> 
        <input name="distinct" id="radio-choice-v-2a" class="distinct_radio" value="false" <?php if (strcmp($distinct, "false") == 0) {echo "checked=\"checked\"";}?> type="radio">
        <label for="radio-choice-v-2a">Show total number of searches.</label>
        <input name="distinct" id="radio-choice-v-2b" class="distinct_radio" value="true" <?php if (strcmp($distinct, "true") == 0) {echo "checked=\"checked\"";}?> type="radio">
        <label for="radio-choice-v-2b">Show number of different people</label>
    </div>
</form>

一些相关的php：

<?php
    if(isset($_POST['distinct'])){
        $distinct   =   $_POST['distinct'];
    } else {
        $distinct   =   "false";
    }
?>

我正在使用的Javascript：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

将此更新到 jquery mobile 1.3.1 并不能解决问题。

第一次单击单选按钮时效果很好。之后，就完全没有反应了。如果我手动刷新页面，它会再次工作一次。

使用第一个脚本，消息“submit distinct_radio”会打印在控制台上，并且控制台会被提交本身清除。

使用第二个脚本，消息“submit distinct_radio”会打印在控制台上，但不会清除控制台。它打印该消息，并完成 POST 请求。但是，POST 请求确实完成了，并且网页已正确更新。再次单击不会导致在控制台打印任何消息，也不会完成任何请求。

使用第二个脚本，如果我将“操作”之后的路径更改为某个不存在的路径，则每次单击都会打印一条控制台消息，并伴随着对不存在的位置执行 POST 请求的新尝试。

我在 FireFox、Chrome 和 Opera 中遇到了这个问题。

除了好奇之外，我想在用户单击表头进行排序时使用它来提交表单。从那里，我不能使用“this.form.submit();”

如何解释这种行为？

编辑：

感谢@peddle（请参阅下面的答案）： 在 Jquery Mobile 中似乎有些问题。删除对 j​​query.mobile-1.3.0.min.js 的引用使其一遍又一遍地工作（因此非常难看）。 Javascript 参考就像 http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/ 建议的那样，所以 jqm 1.3.1 和 jquery 1.9.1 是为了合作。

Answer 1

这不是答案，但需要比评论更多的空间，您是否尝试过以下操作以查看是否有任何不同：

$(function(){
  $('.distinct_radio').change(function() {
     console.log("submit distinct_radio");
    $('form#searchTermForm').get(0).submit();
  });
});

您的示例中的前者使用纯 JavaScript 提交表单，后者使用 jQuery 版本的提交。以上使用jQuery查找表单，但应该使用JavaScript提交方法。以上应测试以下内容：

1. 如果上述方法没有问题，那么您的问题在于 jQuery 的提交。
2. 如果上述方法失败，但产生undefined object 错误，则jQuery 找不到表单。
3. 如果上述操作失败但没有错误，则表示您有非常奇怪的事情发生，或者由于某种原因没有对 JavaScript 进行评估。

更新

要尝试的另一件事：

$(function(){
  $('.distinct_radio').change(function() {
     console.log("submit distinct_radio");
    $('form#searchTermForm').trigger('submit');
  });
});

现在我希望上面的问题与$().submit() 有相同的问题，但你永远不知道。可能导致问题的另一件事是您的表单标记中似乎没有提交按钮。虽然从逻辑上讲这不应该与这种情况有任何关系，但如果您通读 jQuery .submit 页面，他们会得到以下引用：

http://api.jquery.com/submit/

根据浏览器的不同，如果表单只有一个文本字段，或者只有当存在提交按钮时，Enter 键才可能导致表单提交。界面不应依赖此键的特定行为，除非问题是通过观察按下 Enter 键的 keypress 事件来强制执行的。

虽然上面只讨论了使用 enter 键，但浏览器/jQuery 可能在提交按钮丢失时存在其他奇怪/差异。但是我正在达到。

除了上述之外，jQuery 和 jQuery Mobile（您的特定版本）之间可能存在一些干扰，或者它可能是 jQuery 1.9.1 中的一个错误（我不能说我在生产中使用了这么多） .如果你调查 $().trigger() 方法的来源，它在使用 $().submit() 时使用，你会发现它做了很多“魔术”——这就是为什么在你可以得到的时候使用纯 JavaScript 方法可能更好的原因亲自动手。