Javascript 多个pagebeforecreate事件由带有JSFIDLE的嵌套ListView引起

从@jquery上的我的主题：

现在可以理解，但有点不直观。谷歌帮不了多少忙，主要是指“使用pageinit而不是doc.ready（）。嵌套listview页面中的注释可以节省一些时间。只是我还是在点击之前加载页面有点不直观

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

我在说什么？：） Daedalus更新： 原件： 在JSFIDLE中，消息被发送到控制台日志。 打开并清除控制台。跑

注意关于“PageBeforeCreateManHandletheDOM…”等的两条消息。。1，然后2

如果编辑html并删除嵌套的

，然后运行。你只收到一次信息

这发生在具有子菜单的nav菜单的每次页面加载上

---

当单击带有子列表的列表项时，框架将生成一个新的ui页面，该页面在标题中填充父元素的标题和子元素列表。 ..

---

列表可以嵌套到多个层次，框架将自动处理所有页面和链接。

不幸的是，您引用的文档部分是错误的。listview小部件在创建父页面时创建ui页面。单击listview项目时不会。这就是为什么您会看到多个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>

第一步

步骤1
步骤2
步骤3
步骤4
步骤5

不幸的是，您引用的那部分文档是错误的。listview小部件在创建父页面时创建ui页面。单击listview项目时不会。这就是为什么您会看到多个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>

第一步

步骤1
步骤2
步骤3
步骤4
步骤5

我发现的解决方案是使用live/delegate（在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 );
    }                    
  );

---

我找到的解决方案是使用live/delegate（在jq1.7中不推荐使用）的现在和将来的绑定功能

因此，在div[date role=page]中添加一个id属性，然后现在和将来使用“on”方法绑定到这些id上的事件（“pageid1，#pageid2”）

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

---

作为一个小提示，我修复了您的html语法错误，并提高了小提琴的可读性。作为一个小提示，我修复了您的html语法错误，并提高了小提琴的可读性。