jQuery表单提交只能工作一次

Question

jQuery表单提交只能工作一次

javascriptjqueryjquery-mobileonclickform-submit

3

我正在制作一个网页，其中显示了一些搜索词的搜索频率表。在该表格上方有两个单选按钮，用户可以选择查看独特搜索结果或所有结果。

当使用以下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的问题。删除对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应该可以相互协作。

- Jos

你尝试过吗：$('#searchTermForm').submit(); - Deepanshu Goyal

是的，但这没有任何区别。 - Jos

你能否发布一些相关的HTML代码？ - alwaysLearn

我认为它正常工作了？http://jsfiddle.net/f5Xxq/1/ - Netorica

你在多个浏览器中都遇到了这种相同的行为吗？ - Pebbl

@mahan 似乎只能工作一次。尝试将单选按钮放在表单范围之外，但以这种方式它仍然只能工作一次。 - Jos

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pebbl · Accepted Answer

这不是一个答案，但需要比评论更多的空间，您尝试过以下方法来查看是否有任何区别：

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

你的两个例子中，前者使用纯JavaScript提交表单，而后者使用jQuery版本的submit。上面的代码使用jQuery来查找表单，但应该使用JavaScript的submit方法。上面的代码应该测试以下内容：

如果以上内容没有问题，则问题出在jQuery的submit上。
如果以上失败，但产生“未定义对象”错误，则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键的keypress事件来强制执行该问题，否则界面不应依赖于特定的行为。

虽然上述内容仅涉及使用回车键，但浏览器/jQuery可能存在其他奇怪/不同之处，特别是当提交按钮丢失时。然而，我已经尽力了。

除上述情况外，jQuery和jQuery Mobile（您的特定版本）之间可能存在干扰，或者这可能是jQuery 1.9.1的错误（我不能说我在生产中使用过这个版本）。如果您调查$().trigger()方法的源代码，该方法在使用$().submit()时被使用，您将看到它正在执行很多“魔法”-这就是为什么最好在可以获得它时使用纯JavaScript方法的原因。