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请求。< / p>

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

除了好奇心之外，我想在用户点击表格标题进行排序时使用它来提交表单。从那里，我不能使用“this.form.submit（）;”

如何解释这种行为？

编辑：

感谢@peddle（见下面的答案）：似乎在Jquery Mobile中存在一些问题。删除对jquery.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提交方法。以上应测试以下内容：

如果以上工作没有问题，那么你的问题是jQuery的提交。
如果上述操作失败，但产生undefined object错误，则jQuery无法找到该表单。
如果上述操作失败但没有错误，则会发生非常奇怪的事情，或者由于某种原因未对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键的按键事件来强制解决问题，否则界面不应该依赖于此键的特定行为。

虽然以上只是讨论使用回车键，但浏览器/ jQuery有可能在提交按钮缺失时存在其他奇怪/差异。但是我正在接触。

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

Jquery表单提交只能工作一次

1 个答案:

更新