2

我刚刚开始从事 jQM 开发，并且遇到了一些障碍。

简而言之，我有一个 javascript 文件和两个页面。在主页（index.html）中，我动态填充了一个列表视图，并为此列表视图的每个项目注册了点击事件。作为回报，点击事件将 changepage 方法调用到外部页面 (details.html)。这在 100% 的时间里都可以正常工作。

在 javascript 文件中，我在 pagebeforeshow 上为 details.html 页面注册事件。这第一次工作正常，但任何后续调用都不会触发 pagebeforeshow 事件。仔细观察后，我可以看到正在调用 pagechange，pagebeforechange 事件正在被触发，但 pagebeforeshow 仅针对该特定项目触发（直到完全刷新）。

我已经设置了一个示例供您查看。我将非常感谢给出的任何反馈。据我所知 - 我可能使用了错误的事件！？

我可以在 SO 上找到的最接近的帖子是Pagebeforeshow 未在第二次更改页面事件时触发，但它并没有特别处理列表视图，所以我不确定它是否相关。

谢谢，

马特

索引.html

   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
    <!-- All Stock Search -->
    <div id="idxPage" data-role="page" style="height:50px;" data-title="Main Menu">
        <div data-role="header" class="sixteen columns">
            <a href="index.html" data-icon="home" data-direction="reverse">Home</a>
            <h1>
                <a href="index.html" data-icon="home" data-direction="reverse"> Test </a>
            </h1>
        </div>

        <div data-role="content" style="text-align:center;">    
        <ul id="ListItems" data-role="listview" data-inset="true" data-filter="true">
        </ul>
        </div><!-- /content -->
        <footer>
            <div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo"> 
                <h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">

                </h4>
            </div>
        </footer>
    </div>
</body>

详细信息.html

   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
    <!-- All Stock Search -->
    <div id="detailsPage" data-role="page" style="height:50px;" data-title="Main Menu">
        <div data-role="header" class="sixteen columns">
            <a href="index.html" data-icon="home" data-direction="reverse">Home</a>
            <h1>
                <a href="index.html" data-icon="home" data-direction="reverse"> Test </a>
            </h1>
        </div>

        <div data-role="content" style="text-align:center;">    
        <b>Page placeholder</b>
        </div><!-- /content -->
        <footer>
            <div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo"> 
                <h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">

                </h4>
            </div>
        </footer>
    </div>
</body>

jquery.custom.js（JS 库）

$(document).on("pagebeforechange", function (event, data) {
    alert('changing page...');
});
$(document).on('pageinit', function () {
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
    alert('about to show page...');
});

$("#ListItems").off();
$("#ListItems").on("listviewbeforefilter", function (e, data) {
    var $ul = $(this),
                $input = $(data.input),
                value = $input.val(),
                html = "";
    $ul.html("");

    if (value && value.length > 2) {
        $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
        $ul.listview("refresh");

        var max = 200;
        var limit = 0;

        var itemslist = [
            {"id":1, "desc":"item1"},
            {"id":2, "desc":"item2"},
            {"id":3, "desc":"testitm1"},
            {"id":4, "desc":"testitm2"}
            ];

        $.each(itemslist, function (i, val) {

            if (limit < max) {
                if (val.desc.toString().toLowerCase().indexOf(value.toLowerCase()) != -1) {
                    $ul.append('<li id="' + val.id + '" ><a style="text-align:left" data-icon="arrow-r" data-iconpos="right" >' + val.desc + '</a></li>');

                    $('#' + val.id).off();
                    $('#' + val.id).on('tap', function (event) {
                        var elementId = $(this).attr('id');

                        $.mobile.changePage("details.html?Id="+elementId, { data: { "Id": elementId} });
                    });

                    limit++;
                }
            }

        });

        $ul.listview("refresh");
        $ul.trigger("updatelayout");

    }
});

});
4

1 回答 1

5

您错误地绑定页面事件。

而不是这个：

$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
    alert('about to show page...');
});

用这个：

$(document).on("pagebeforeshow", "#detailsPage",function(event){
    alert('about to show page...');
});

请记住，jQuery Mobile 页面事件必须始终与事件委托一起添加。

此外，您不需要对页面事件使用 off()，它们不会受到多事件绑定问题的影响。如果您有更多问题，请随时在评论中提问。

于 2013-05-07T16:29:58.270 回答