Question

我正在使用带有jQuery和jQuery mobile的Onsen框架，看起来没有办法捕获加载新页面后触发的事件。

我当前的代码，在index.html文件（母版页）中执行

<script src="scripts/jQuery.js"></script>
<script src="scripts/jquery.mobile.custom.min.js"></script> 
<script src="scripts/app.js"></script> 
<script>
    ons.bootstrap();
      ons.ready(function() {

        $(document.body).on('pageinit', '#recentPage', function() {
            initRecentPage();
        });


});

app.js中的

是以下代码

function initRecentPage() {

$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
ons.compile(content);
}

和HTML：

<ons-page id="recentPage"> 
<ons-toolbar id="myToolbar">        
        <div id="toolBarTitle" class="center">Recent Checks</div>
         <div class="right">
            <ons-toolbar-button ng-click="mySlidingMenu.toggleMenu()">
                <ons-icon icon="bars"></ons-icon>
            </ons-toolbar-button>
        </div>
</ons-toolbar>
<ons-scroller>

<h3 class="headingTitle"> Checks</h3>
<div id="Free" class="tabArea">

<ons-list id="yourReports">
</ons-list>
<ons-button id="clearFreeRecentButton">
<span id="clearRecentText" class="bold">Clear Recent Checks</span>  
</ons-button>
</div>

</ons-scroller>
</ons-page>

在这个例子中变量＆＃39;内容＆＃39;永远是空的。我已经显着地进行了调试，当这个事件发生时，我想要得到的元素不存在。它稍后加载。

所以，问题是，在使用选择器之前，如何确保所有内容都存在。感觉这是一个特定问题。

Answer 1

最后，我只能找到一种可靠的方法来完成这项工作。基本上我不得不等待，使用setTimeout 300毫秒来准备DOM元素。这感觉就像一个黑客，但老实说，没有其他可靠的方法使这种行为。该应用程序位于应用程序商店并且运行良好，因此即使它看起来像是黑客，它仍然有效：

 $(document).on('pageinit', '#homePage', function() {
        initHomePage();
    });

function initHomePage() {
 setTimeout(function() {
    setUpHomePage();
 }, 300);
}

Answer 2

将$(document.body).on('pageinit', '#recentPage', function() {移到ons.ready阻止之外。

<强> JS

ons.bootstrap();
ons.ready(function() {
  console.log("ready");
});

$(document.body).on('pageinit', '#recentPage', function() {
            initRecentPage();
 });

function initRecentPage() {

//$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
  alert(content)
ons.compile(content);
}

我注释掉了一行，因为我无权访问“recentShowReport”

您可以在此处查看其工作原理：'http://codepen.io/vnguyen972/pen/xCqDe'

警报将显示'content'不为NULL。希望这会有所帮助。

在ons.ready上的onsen pageinit之后无法访问DOM元素

2 个答案: