Jquery 为什么此页上的表单只工作一次？_Jquery_Css_Forms_Jquery Mobile

Jquery 为什么此页上的表单只工作一次？

jquery css forms jquery-mobile

Jquery 为什么此页上的表单只工作一次？,jquery,css,forms,jquery-mobile,Jquery,Css,Forms,Jquery Mobile,我是jQuery Mobile的新手，所以我怀疑这个问题与JS jQuery Mobile运行有关窗体在第一次运行时似乎表现出了预期的效果。随后的提交似乎什么也没做……而且每次提交后都会有一些令人讨厌的动画编辑：您可以为示例查询输入“test” <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-w

我是jQuery Mobile的新手，所以我怀疑这个问题与JS jQuery Mobile运行有关

窗体在第一次运行时似乎表现出了预期的效果。随后的提交似乎什么也没做……而且每次提交后都会有一些令人讨厌的动画

编辑：您可以为示例查询输入“test”

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Phone Price Look-up</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
        </script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Price Finder
                </h3>
            </div>
            <div data-role="content">
                <div id="search-form-container">
                    <form name="search-form">
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup">
                                <label for="search_term">
                                    Enter Model Number:
                                </label>
                                <input id="search_term" placeholder="" value="" type="text" />
                            </fieldset>
                        </div>
                        <input id="search-form-submit" type="submit" data-theme="b" value="Submit" />
                    </form>
                </div>
            </div>
            <div data-theme="a" data-role="footer">
                <h2>
                    www.thephonerecyclers.com
                </h2>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $.mobile.ajaxLinksEnabled = false; // don't really know what this does.
                $('#search-form-submit').click(function() {
                    var searchTerm = $('#search_term').val();
                    $.ajax({
                        type: 'POST',
                        url: 'ajax/search.php',
                        data: {search_term: searchTerm},
                        success: function(response) {
                            response = JSON.parse(response);
                            if (!response.success) {
                                alert('no phone found');
                            } else {
                                var phoneInfo = JSON.parse(response.response);
                                alert(phoneInfo[0].manufacturer + ' ' + phoneInfo[0].name + ' (' + phoneInfo[0].model_no + ')' + '\n$' + phoneInfo[0].price);
                            }
                        },
                        error: function() {
                            //handle error
                            alert('error doing ajax, mate');
                        }
                    });
                });
            });
        </script>
    </body>
</html>


电话价格查询
/*应用程序自定义样式*/
价格探索者
输入型号：
www.thephonerecyclers.com
$（文档）.ready（函数（）{
$.mobile.ajaxLinksEnabled=false；//我真的不知道这是怎么回事。
$（“#搜索表单提交”）。单击（函数（）{
var searchTerm=$（'#search_term'）.val（）；
$.ajax({
键入：“POST”，
url:'ajax/search.php'，
数据：{search_term:searchTerm}，
成功：功能（响应）{
response=JSON.parse（response）；
如果（！response.success）{
警报（“未找到电话”）；
}否则{
var phoneInfo=JSON.parse（response.response）；
警报（phoneInfo[0]。制造商+“”+phoneInfo[0]。名称+”（“+phoneInfo[0]。型号“+”）“+”\n$”+phoneInfo[0]。价格）；
}
},
错误：函数（）{
//处理错误
警报（“执行ajax时出错，mate”）；
}
});
});
});

ajax成功函数中的警报有语法错误，我认为这是它无法工作的原因：

你有：

 alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

应该是：

 alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +'('+phoneInfo[0].model_no+')\n$'+ phoneInfo[0].price);

修复此行中的语法错误：

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

e、 g:

由于jquerymobile中的大部分都使用散列路由导航和动态创建的内容，普通的事件处理程序可能还不够。在您的示例中，您正在将表单发布到新的哈希路由，并在不重新加载的情况下重建页面。新创建的对象不包括在先前定义的任何事件处理程序中

而不是像您那样定义单击处理程序：

$('#search-form-submit').click(function() {

您应该使用jQuery“on”函数。因为您包含的是较旧版本的JQuery，所以请使用“live”函数，该函数具有类似的用途，如下所示：

 $('#search-form-submit').live("click", function(){

通过以这种方式绑定事件，处理程序还应包含任何动态创建的内容。

在此处发布代码。我不点击问题中的链接。这对我来说甚至第一次都不起作用。我用的是Chrome，什么坏了？这种行为每次对我来说都是一样的。FireBug每次都会显示请求和响应。我已经修复了我在发布问题后无意中创建的语法错误。他们现在走了。我发布的原始问题仍然存在。哎呀，我只是在发布我的问题之前添加了那些括号。现在已经修复了，但是没有解决我发布的问题。哎呀，在发布我的问题之前，我刚刚添加了那些括号。它现在已经修复了，但没有解决我发布的问题。在我回来检查新答案之前，我刚刚想知道处理程序是否第二次没有连接。你证实了我的怀疑并提供了有效的解决方案。谢谢我唯一想知道的是，使用

live（'click'，…）

还是创建一个JS函数来包装所需的AJAX功能并将其附加到HTML本身的按钮上更好：

与内联代码相比，我更喜欢处理程序，但就最佳实践而言，我不太确定。

 $('#search-form-submit').live("click", function(){