多个页面之前创建由使用 jsfiddle 的嵌套列表视图引起的事件

Multiple pagebeforecreate events caused by nested listviews with jsfiddle

本文关键字：嵌套 jsfiddle 列表 视图 事件 创建      更新时间：2023-09-26

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

现在可以理解，但有点不直观。谷歌没有多大帮助，主要指出"使用pageinit而不是doc.ready(("。嵌套列表视图页面中的注释可以节省一些时间。是只有我一个人，还是在点击之前加载页面有点不直观？

问题是：如何检测事件加载的差异？探索事件对象时没有任何亮点。

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

请注意关于"pagebeforecreate Man handle the dom.."等的两条消息。 1，然后是2

如果编辑 html 并删除嵌套<ul> ... </ul>，则运行。您收到一次消息。

这发生在每个页面加载时，其中包含具有子菜单的导航菜单。

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

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

不幸的是，您引用的文档的那部分是错误的。列表视图小部件在创建父页面时创建 ui 页面。单击列表视图项时不会。这就是您看到多个页面创建事件的原因。如果您有两个嵌套的列表视图，您将看到 3 个页面之前创建事件。从我下面粘贴的代码中可以看到，嵌套列表的子页面与普通的 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>

我发现的解决方案是使用类似功能的 live/delegate(在 jq 1.7 中已弃用(的现在和将来绑定。

因此，将 id 属性添加到div[date-role=page]，然后使用 'on' 方法绑定到这些 ids("#pageid1， #pageid2"(上的事件，现在和将来... 

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