Question

来自@ jquery的主题： https://forum.jquery.com/topic/multiple-pagebeforecreate-events-triggered-when-jqm-builds-the-page-for-nested-listviews-w-jsfiddle

现在这是可以理解的，但有点不直观。谷歌没有多大帮助，大多指向“使用pageinit而不是doc.ready（）”。嵌套列表视图页面中的注释可以节省一些时间。是仅仅是我还是在点击之前加载页面有点不直观？

问题是：如何检测事件负载的差异？探索事件对象时没有任何事情发生。

我在说什么？ :) 由Daedalus更新：http://jsfiddle.net/3Shyb/ 原文：http://jsfiddle.net/jhr007/mDVfP 在jsfiddle中，消息被发送到控制台日志。打开并清除控制台。运行

注意关于“pagebeforecreate Man处理dom ..”等两条消息.1，然后2

如果编辑html并删除嵌套的

... ，则运行。你得到一次消息。

这会在每个页面加载w /带有子菜单的导航菜单上发生。

http://www.jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html

当单击带有子列表的列表项时，框架将生成一个新的ui页面，其中填充了标题中父项的标题和子元素列表。 .. 列表可以嵌套多个级别，所有页面和链接将由框架自动处理。

Answer 1

不幸的是，您引用的那部分文档是错误的。 listview小部件在创建父页面时创建ui页面。单击列表视图项时不会。这就是您看到多个pagecreate事件的原因。如果您有两个嵌套的列表视图，您将看到3个pagebeforecreate事件。您可以从我下面粘贴的代码中看到，嵌套列表的子页面与普通的JQM页面完全相同。

<div data-role="page" data-url="/_display/&amp;ui-page=0-0" data-theme="null" data-count-theme="c" tabindex="0" class="ui-page ui-body-null">

    <div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner">
        <div class="ui-title">Step 1</div>
    </div>

    <div data-role="content" class="ui-content" role="main">
        <ul class="ui-listview">
            <li class="ui-li ui-li-static ui-body-c">Step 1</li>
            <li class="ui-li ui-li-static ui-body-c">Step 2</li>
            <li class="ui-li ui-li-static ui-body-c">Step 3</li>
            <li class="ui-li ui-li-static ui-body-c">Step 4</li>
            <li class="ui-li ui-li-static ui-body-c">Step 5</li>
        </ul>
    </div>

</div>

Answer 2

我发现的解决方案是使用live / delegate的NOW AND IN THE FUTURE绑定（在jq 1.7中弃用），如功能。

所以在div [date-role = page]中添加一个id属性，然后使用'on'方法绑定到这些id上的事件（“＃pageid1，＃pageid2”），现在和未来。 ..

$( document ).on( 'pagebeforecreate', "#pageid1, #pageid2" ,
    function (event) {
      console.log('pagebeforecreate ', event.target.id );
    }                    
  );

由嵌套列表视图w / jsfiddle引起的多个pagebeforecreate事件

2 个答案: