jQuery Mobile自动完成加载页面时的不同行为 [英] jquery mobile autocomplete different behavior at loading page

问题描述

目前，jquery mobile中的自动完成功能存在问题( http://andymatthews.net/code /autocomplete/).因此，如果我直接通过url运行页面，则该页面和自动完成功能将正常运行.如果我通过例如导航到页面具有更改页面功能的主菜单，自动完成功能将无法使用！

Currently I've a problem with the autocomplete function in jquery mobile ( http://andymatthews.net/code/autocomplete/ ). So if I run the page directly via url, the page and the autocomplete functionality will work without any problems. If I navigate to the page via e.g. a mainmenu with the changepage function, the autocomplete function won't work!

你能给我个建议吗?

我的代码:

主菜单:

<li>
    <a id="buttonNewReservation" href="newReservations/newReservation.htm">Neue Reservation</a>
    <script type="text/javascript">
        $.cookie.json = true;
        $('#buttonNewReservation').click(newReservation);

        function newReservation() {
            var session = $.cookie("session");
            if (session != null) {
                $.mobile.changePage("/newReservations/newReservation.htm", 
                       {data:session});
            }
        }   
    </script>
</li>

• 具有自动完成功能的页面:与 http://andymatthews.net/code/autocomplete相同的代码/search.html
• Page with autocomplete: The same code as in http://andymatthews.net/code/autocomplete/search.html

感谢您的帮助！

亲切的问候，亲

推荐答案

您可以在head标记中导入自动完成脚本.由于JQM仅加载一次(打开的第一页)，然后使用data-role="page"从要转到的页面动态加载div，因此始终将第一页的head标记用于重定向到的页面在该页面上.

You import the autocomplete script in the head tag. As JQM only loads this once (the first page you open) and then dynamically loads the div from the page you want to go to with data-role="page", the head tag from the first page is always used in the pages you redirect to from that page.

有关更多信息，请阅读以下页面: http://jquerymobile.com/test/docs/pages/page-scripting.html (头部的脚本和样式)

For more information read this page: http://jquerymobile.com/test/docs/pages/page-scripting.html (Scripts & styles in the head)

因此您需要添加以下行:

So you need to add this line:

<script src="jqm.autoComplete-1.4.3-min.js"></script>

向您显示div，如下所示:

to you page div, like this:

<div data-role="page" id="mainPage">
    <script src="jqm.autoComplete-1.4.3-min.js"></script>
    <div data-role="header">
    //rest of the code....
</div>//end of data-role="page"

这种方式将在JQM使用AJAX插入页面时加载脚本，并且当您直接进入页面时也可以使用

This way the script will be loaded when JQM pulls in the page using AJAX and it will also be available when you go to the page directly

这篇关于jQuery Mobile自动完成加载页面时的不同行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！