Question

我刚刚开始进行jQM开发并且遇到了一些障碍。

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

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

我为您设置了一个样本供您查看。我会非常感谢任何给出的反馈。据我所知 - 我可能正在使用错误的事件！？

我在SO上找到的最接近的帖子是Pagebeforeshow not fired on second time change Page event但是它没有特别处理列表视图，所以我不确定它是否相关。

谢谢，

马特

的index.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>

details.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 Library）

$(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");

    }
});

});

Answer 1

您正在错误地绑定页面事件。

而不是：

$("#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（），它们不会遇到多个事件绑定问题。如果您有更多问题，请随时在评论中提问。

调用changepage后未触发pagebeforeshow事件

1 个答案: