Android-Phonegap-Jquery Mobile：表单提交第二次不起作用答案

【问题标题】：Android-Phonegap-Jquery Mobile: form submit does not work 2nd timeAndroid-Phonegap-Jquery Mobile：表单提交第二次不起作用
【发布时间】：2012-03-28 16:51:41
【问题描述】：

我正在使用 Phonegap 和 JQM 开发移动 Web 应用程序。我有带有搜索输入表单的页面，它提交给自己，并假设使用来自服务器的 AJAX 查询获取数据。我输入文本并在手机上按 Enter 键，表单提交事件处理程序执行，但随后每当我在手机键盘上按 Enter 键时它都不会执行。我试图在 pagainit、pagecreate 中添加事件处理程序，但没有帮助将脚本添加到页面本身，但它的行为相同。将处理程序添加到表单的正确方法是什么。

<html>
<head>
    <title>MyApp</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">        
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">        
    <link rel="stylesheet"  href="css/jquery.mobile-1.0.1.min.css" />
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="js/mobileinit.js"></script>
    <script src="js/ios-orientationchange-fix.min.js"></script>
    <script src="js/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript" src="js/phonegap.js"></script>

</head>
<body >

        <div data-role="page" id="index" >
            <form id="indexsearchform" method="post"  >

             <div data-role="content">

                <input type="search" id="txtbusinesssearch" placeholder="Search Business...."/>

              </div>    

            </form>
            <script type="text/javascript"><!--
                $('#indexsearchform').submit(function(){
                                        alert("hi");

                });

            --></script>
        </div>
</body>
</html>

【问题讨论】：

标签： android forms jquery-mobile cordova form-submit

【解决方案1】：

您的表单中没有第二条警告消息的原因仅仅是因为您第一次单击#submit 按钮后看到的表单不是同一个表单。它看起来一样，具有相同的标记，但这是因为 jQuery mobile 将表单提交到您所在的地址并显示结果。

你可以做两种选择

1)使用<form id="callAjaxForm" data-ajax="false">

向表单添加 data-ajax="false" 后的行为导致 jQuery mobile 以常规方式提交表单，因此页面实际上被重新加载并且每次 #submit 按钮的单击处理程序都有效。

2) 只需将 type="submit" 更改为 type="button" 普通按钮可以正常工作:)

【讨论】：

感谢您的回复，但如果每次都创建新表单，那么 .live 应该可以工作。但是我发现以下没有 .die 的代码会多次执行提交处理程序 $('#index').live('pageinit', function(event){ $('#indexsearchform').live('submit',function( ){ $('#indexsearchform').die(); alert("hi"); }); }); .使用 .die 我得到了我想要的行为。看起来每个 .lve 都必须有 .die 函数调用。

【解决方案2】：

试试这个：

<form id="indexsearchform" method="post" onsubmit="functionToBeExecutedOnSubmit();" >

【讨论】：