我有一个插件,需要找到一个插入cordova页面的元素(使用离子框架)。当我需要让jQuery操纵一些由离子框架插入的元素时,我遇到了麻烦。
当我尝试操作非动态元素时,一切正常,所以我知道操作正常。
我得到的问题是jQuery选择器没有找到元素并返回undefined。在确定元素存在后,如何让jQuery再次查看?
具有离子性的Cordova页面如此:
<ion-view has-footer="true" title="">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon-right"><i class="ion-gear-a menu-icon"></i></button>
</ion-nav-buttons>
<ion-content class="has-header sb-bg">
<div id="items">
<!-- First special s -->
<ion-item ng-repeat="s in ss | limitTo:1" ng-class="{first_s: $first }">
<div class="s-controls">
<button ng-click="show_share()"
class="button button-icon s-share-button"><i class="ion-forward s-share-icon"></i>
</button>
<div class="countdownexample" data-timer="20"></div>
<button ng-click="playPause($event, s.audio_file_url)"
class="button button-icon s-play-button"><i class="ion-play s-play-icon"></i>
</button>
</div>
<div class="s-info">
<h1>{{ s.market_code }}</h1>
<p>{{ s.headline }}</p>
<h4 class="tos">{{ timeformat(s.created_at) }}</h4>
</div>
</ion-item>
<button class="btn btn-success start">Start</button>
<button class="btn btn-danger stop">Stop</button>
<button class="btn btn-info restart">Restart</button>
<script>
$(".countdownexample").TimeCircles({ // is undefined when trying to operate on this
start: true,
direction: "Counter-Clockwise",
count_past_zero: false,
fg_width: 0.1,
use_background: false,
total_duration: 20,
time: {
Days: {show: false},
Hours: {show: false},
Minutes: {show: false},
Seconds: {color: '#FF0000', text: null}
}
});
$(".start").click(function () {
$(".countdownExample").TimeCircles().start();
});
$(".stop").click(function () {
$(".countdownExample").TimeCircles().stop();
});
$(".restart").click(function () {
$(".countdownExample").TimeCircles().restart();
});
</script>
</ion-view>
答案 0 :(得分:0)
看起来就像你做的那样:
$(".countdownexample").TimeCircles(/*...*/);
...没有符合.countdownexample
的元素。您需要挂钩离子框架完成其工作时引发的任何事件,并在元素存在时执行代码然后。 (也许你需要等待离子的ready
callback,尽管文档建议在window.onload
之后发生,在页面加载周期的后期非常。)< / p>