Question

我是JQM的新手，我正在将Phongeap和JQM用于一个新项目。我的javascript在一个单独的js文件中，我正在从多个html文件中加载视图。

由于siede面板的转换效果不佳，当我通过<a href="page2.html">更改页面时，我试图为Menuitems使用事件监听器。

    function setPanelListeners(){
    $('#menu_search').click(function() {
                            switchPageTo('search.html');
                            });
    $('#menu_schedule').click(function() {
                              switchPageTo('program.html');
                              });
    $('#menu_news').click(function() {
                              switchPageTo('news.html');
                              });
}

我在每个页面的pagebeforeshoe事件上调用此函数。要将转换修复为我需要的方式，我使用此函数

    // Close Panel then change page
function switchPageTo(url){
    $('#menupanel').panel('close');
    setTimeout(function() {
               $.mobile.changePage( url, { transition: 'fade'} );
            },200);
}

所以这就是问题所在。它实际上在第一页上正常工作。但是在第二页上菜单项将无法正常工作，我想事件列表不会监听新面板，因为在html中面板加载了两次！并且事件侦听器只侦听第二个页面上未显示的第一个面板（从第一页开始）。

任何帮助表示赞赏！

Answer 1

您是否在第二页上动态添加面板？在JQM 1.3中，您必须为每个页面单独添加面板，但在将来的版本中将删除此限制。

为动态面板使用事件委托：

$(document).on('click' ,'#menu_search' function() {
        switchPageTo('search.html')
   });

多页面上jqm侧面板的事件监视器

1 个答案: