jQuery无法找到动态插入的离子框架元素

时间:2014-07-27 23:21:30

标签: javascript jquery cordova ionic-framework

我有一个插件,需要找到一个插入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>

1 个答案:

答案 0 :(得分:0)

看起来就像你做的那样:

$(".countdownexample").TimeCircles(/*...*/);

...没有符合.countdownexample的元素。您需要挂钩离子框架完成其工作时引发的任何事件,并在元素存在时执行代码然后。 (也许你需要等待离子的ready callback,尽管文档建议在window.onload之后发生,在页面加载周期的后期非常。)< / p>