javascript - 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 请求确实完成了，网页也正确更新了。再次单击不会导致在控制台打印任何消息，也不会完成任何请求。

对于第二个脚本，如果我将“action”之后的路径更改为某个不存在的路径，则每次点击都会打印一条控制台消息，同时尝试对不存在的位置执行 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/

Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.

虽然上面只讨论了使用回车键，但当提交按钮丢失时，浏览器/jQuery 可能有其他奇怪/差异。不过我正在努力。

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