Question

我是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>

Answer 1

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

而不是像你一样定义点击处理程序：

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

你应该使用jQuery“on”函数。因为您要包含较旧版本的JQuery，所以请使用“实时”功能，其功能与此类似：

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

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

Answer 2

你的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);

Answer 3

修复此行中的语法错误：

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

e.g：

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

为什么此页面上的表单只能使用一次？

3 个答案: