

初めて質問させて頂きます。何卒よろしくお願い致します。

質問内容はOnsenUIとjQueryをつかったハイブリッドアプリ実装に関する事で、jQuery側で動的に作成したli要素のOnでクリックイベントをハンドルした際に、OnsenUI側のons.navigatorに対してpushPageを発動させる為にはどのようにすれば宜しいでしょうか？

ページ構成としてはOnsenUIのスライディングメニューを使っておりますので、index.html内で下記のようにons-sliding-
menuタグを記述し、

[code]

    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay" max-slide-distance="200px">
    
[/code]

さらに同ページ内で各メニュー選択時にセットアップされるmain-pageごとにons.readyで必要処理を記述しております。

下記はスライディングメニュー選択時にセットされるページの1つで、Ajax通信で取得したデータを表示するためにjQueryで動的生成したli要素に対して、クリックイベントの中からOnsenUIのpushPageを実行して画面遷移しようとしています。

[code]

    module.controller('ctrl_search.html', function($scope) {
      ons.ready(function() {
        $(".cs-ulh").on('click', 'li', function(){
          myNavigator.pushPage('g_search_detail.html');
        });
      });
    });
    
[/code]

上記のように対象となるに対し、単純にpushPageと記述しても動作しません。

これを実現させる為にはどのようにすべきなのでしょうか？

## ※もう少し具体的な情報を追記させて頂きます。

■index.html

[code]

    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
    
    module.controller('ctrl_search.html', function($scope) {
      ons.ready(function() {
    
        // AJAX通信後に動的にli要素生成
        function ajaxRequest(reqPrm){
          var errcount = 0;
          $.ajax({
            },success: function(json){
              for(var i=0; i<json.length; i++){
                $(".cs-ulh").append(li要素を追加);
              }
          });
        }
    
        // 動的生成されたliクリックでsearch.detail.htmlに遷移
        $(".cs-ulh").on('click', 'li', function(){
          myNavigator.pushPage('g_search_detail.html');
        });
    
      });
    });
    
[/code]

* * *

■home.html

[code]

    <ons-navigator var="myNavigator">
      <ons-page ng-controller="ctrl_home.html">
        <ons-toolbar></ons-toolbar>
      </ons-page>
    </ons-navigator>
    
[/code]

* * *

■search.html

[code]

    <ons-page ng-controller="ctrl_search.html">
      <ons-toolbar>...</ons-toolbar>
      <ul class="cs-ulh"></ul>
    </ons-page>
    
[/code]

* * *

当該関連個所だけ抜き出すとこんな感じです。  
index.htmlで記述されているスライディングメニューでは、  
main-pageとしてhome.htmlを指定。  
home.htmlの中で、ons-navigatorのvar=myNavigatorを設定。  
search.htmlの中でul要素にclass指定しています。  
そしてindex.htmlの中ではAjax通信の後にli要素を動的生成して、  
その動的li要素がクリックされたときにpushPageを実行しています。  
これでも動作しないのですが何が問題なのでしょうか？  
何卒ご教授お願い致します。


CC BY-SA 3.0
2016-02-07T22:05:57.613
21822
2016-10-25T13:28:14.723
2016-02-09T09:52:46.177
-1
14317
question
jquery onsen-ui
jQueryからOnsenUIの画面遷移を実行出来ますか？


部分的ではなく全体を見ないとどこが問題か判断できませんが、

AngularJSのコントローラー定義

[code]

    ng-controller="ctrl_search.html"
    
[/code]

クラス定義(HTML)

[code]

    class="cs-ulh"
    
[/code]

Onsen UIのナビゲーター定義

[code]

    <ons-navigator var="myNavigator">
    
[/code]

遷移先のhtmlファイル

[code]

    g_search_detail.html
    
[/code]

これらが適切に設定されていれば動作はすると思います。

Monaca IDEであればブラウザのコンソール等、開発環境で何かエラーは出ていませんか？


CC BY-SA 3.0
2016-02-08T02:43:25.033
21828
2016-02-08T02:43:25.033
13314
21822
answer