2

index.html

<ons-tabbar var="tabbar">
    <ons-tabbar-item
        var="tab1"
        icon="home"
        label="売上"
        page="page1.html"
        active="true"></ons-tabbar-item>
    <ons-tabbar-item
        icon="heart"
        label="お客様一覧"
        page="page2.html"></ons-tabbar-item>
    <ons-tabbar-item
        icon="star"
        label="ランキング"
        page="page3.html"></ons-tabbar-item>
    <ons-tabbar-item
        icon="gear"
        label="設定"
        page="page4.html"></ons-tabbar-item>
</ons-tabbar>

page2.html

<ons-navigator var="user_var" page="user/user_list.html">

user_list.html

<div class="navigation-bar">
<div class="navigation-bar__left">
    <span class="toolbar-button--quiet navigation-bar__line-height" onclick="console.log('debug2');">戻る</span>
</div>

<div class="navigation-bar__center">
    お客様一覧
</div>

<div class="navigation-bar__right">
    <span class="toolbar-button--quiet navigation-bar__line-height" onclick="console.log('debug');">追加</span>
</div>

user_list.htmlのonclick処理がどうしても動作しません
※user_var.pushPage('XXX.html')とonclickに入れても同様です。

page1.htmlに同様に設定しているonclickは動作します。

1 件の回答 1

2

試してみましたが、問題無く動いているように思います。
質問に記載している部分とは別のところに原因があるのかもしれません。

話が逸れてしまい恐縮ですがpage2.htmlが記載している内容で全てであれば、ons-navigatorの閉じタグを追加しましょう。

ons.bootstrap();
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>


<ons-tabbar var="tabbar">
  <ons-tabbar-item
                   var="tab1"
                   icon="home"
                   label="売上"
                   page="page1.html"
                   active="true"></ons-tabbar-item>
  <ons-tabbar-item
                   icon="heart"
                   label="お客様一覧"
                   page="page2.html"></ons-tabbar-item>
  <ons-tabbar-item
                   icon="star"
                   label="ランキング"
                   page="page3.html"></ons-tabbar-item>
  <ons-tabbar-item
                   icon="gear"
                   label="設定"
                   page="page4.html"></ons-tabbar-item>
</ons-tabbar>

<ons-template id="page1.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>
  
  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="page2.html">
  <ons-navigator var="user_var" page="user_list.html"></ons-navigator>
</ons-template>

<ons-template id="user_list.html">
  <div class="navigation-bar">
    <div class="navigation-bar__left">
        <span class="toolbar-button--quiet navigation-bar__line-height" onclick="console.log('debug2');">戻る</span>
    </div>
    <div class="navigation-bar__center">
        お客様一覧
    </div>  
    <div class="navigation-bar__right">
        <span class="toolbar-button--quiet navigation-bar__line-height" onclick="user_var.pushPage('page3.html')">追加</span>
    </div>
  </div>
</ons-template>
 
<ons-template id="page3.html">
  <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">Page 3</div>
  </ons-toolbar>
</ons-template>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。