带有 Kendo UI 的 Jquery Mobile UI 列表视图

Question

我正在使用 Jquery 移动 UI 列表视图。

<div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="a">

                    <li>
                        <a href="Area.aspx">Area</a>
                    </li>

            </div>

在“Area.aspx”页面中，我有一个 Kendo UI 网格。

<div id="example" class="k-content">
            <div id="clientsDb">

                <div id="grid" style="height: 380px"></div>

            </div>

            <style scoped>
                #clientsDb {
                    width: 692px;
                    height: 413px;
                    margin: 30px auto;
                    padding: 51px 4px 0 4px;
                    background: url('web/grid/clientsDb.png') no-repeat 0 0;
                }
            </style>

            <script type="text/javascript">
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        columns: [{
                            field: "FirstName",
                            width: 90,
                            title: "First Name"
                        }, {
                            field: "LastName",
                            width: 90,
                            title: "Last Name"
                        }, {
                            width: 100,
                            field: "City"
                        }, {
                            field: "Title"
                        }, {
                            field: "BirthDate",
                            title: "Birth Date",
                            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                        }, {
                            width: 50,
                            field: "Age"
                        }
                        ]
                    });
                });
            </script>
        </div>

我的问题是当我点击链接区域页面时没有导航。它被显示的 Jquery 加载图像卡住了。

Answer 1

这是因为jquery Mobile会拦截<a>标签，使用AJAX获取HTML来导航页面，而不是直接换页。这将导致您在“Area.aspx”中的 javascript 不会执行。

要解决此问题，您需要在 url 中添加 data-ajax="false" 和 rel="external"。

更多了解jquery Mobile，请参考jquery mobile api：
http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html

或者我关于这个问题的博客：
http://demanstudio.blogspot.com/2013/02/javascript-do-not-execute-in-jquery.html

<a href="Area.aspx" rel="external" data-ajax="false">Area</a>