Jquery mobile 调用changepage后未激发pagebeforeshow事件_Jquery Mobile_Jquery

Jquery mobile 调用changepage后未激发pagebeforeshow事件

jquery-mobile jquery

Jquery mobile 调用changepage后未激发pagebeforeshow事件,jquery-mobile,jquery,Jquery Mobile,Jquery,我刚开始从事jQM开发，遇到了一些困难简而言之，我有一个javascript文件和两个页面。在主页（index.html）中，我动态填充一个listview，并为此listview的每个项目注册tap事件。作为回报，on-tap事件将changepage方法调用到外部页面（details.html）。这在100%的情况下都能正常工作在javascript文件中，我正在为details.html页面注册pagebeforeshow上的事件。这在第一次超时时可以正常工作，但任何后续调用都不会触发

我刚开始从事jQM开发，遇到了一些困难

简而言之，我有一个javascript文件和两个页面。在主页（index.html）中，我动态填充一个listview，并为此listview的每个项目注册tap事件。作为回报，on-tap事件将changepage方法调用到外部页面（details.html）。这在100%的情况下都能正常工作

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

我已经为您准备了一个样品供您查看。我将非常感谢您的反馈。据我所知，我可能使用了错误的事件

我能在SO上找到的最接近的帖子是，但是它并没有特别处理ListView，所以我不确定它是否相关

谢谢

马特

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库）

$（文档）。在（“pagebeforechange”上，函数（事件、数据）{
警报（'更改页面…'）；
});
$（文档）.on（'pageinit'，函数（）{
$（“#detailsPage”）.off（）；
$（“#detailsPage”）。在（“pagebeforeshow”，函数（事件）{
警报（“即将显示页面…”）；
});
$（“#列表项”）.off（）；
$（“#ListItems”）。关于（“listviewbeforefilter”，函数（e，数据）{
var$ul=$（此），
$input=$（data.input），
value=$input.val（），
html=“”；
$ul.html（“”）；
如果（value&&value.length>2）{
$ul.html（“”）；
$ul.列表视图（“刷新”）；
var max=200；
var限值=0；
var itemslist=[
{“id”：1，“desc”：“item1”}，
{“id”：2，“desc”：“item2”}，
{“id”：3，“desc”：“testm1”}，
{“id”：4，“desc”：“testm2”}
];
$.each（项目列表、函数（i、val）{
如果（限值<最大值）{
if（val.desc.toString（）.toLowerCase（）.indexOf（value.toLowerCase（））！=-1）{
$ul.append（““+val.desc+””）；
$（'#'+val.id）.off（）；
$（'#'+val.id）.on（'tap'，函数（事件）{
var elementId=$（this.attr（'id'）；
$.mobile.changePage（“details.html？Id=“+elementId，{data:{“Id”：elementId}”）；
});
极限++；
}
}
});
$ul.列表视图（“刷新”）；
$ul.trigger（“updatelayout”）；
}
});
});

您未正确绑定页面事件

与此相反：

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

使用以下命令：

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

请记住，jQuery移动页面事件必须始终与事件委派一起添加

另外，您不需要将off（）用于页面事件，它们不会遇到多事件绑定问题。如果您有更多问题，请随时在评论中提问。

非常好。他马上就开始工作了。感谢您提供的详细信息！

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