About button click processing after page transition

index.html

<ons-tabbar var="tabbar">
    <ons-tabbar-item
        var="tab1"
        icon="home"
        label = "Sales"
        page="page1.html"
        active="true"></ons-tabbar-item>
    <ons-tabbar-item
        icon="heart"
        label = "Customer List"
        page="page2.html">/ons-tabbar-item>
    <ons-tabbar-item
        icon="star"
        label = "Ranking"
        page="page3.html">/ons-tabbar-item>
    <ons-tabbar-item
        icon="gear"
        label = "Settings"
        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');">Back</span>
</div>

<div class="navigation-bar__center">
    Customer List
</div>

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

The user_list.html onclick operation just won't work.
*The same goes for user_var.pushPage('XXX.html') and onclick.

If you configure page1.html in the same way, onclick works.

monaca

2022-09-30 18:51

1 Answers

I tried it, but it seems to be working without any problems.
There may be a different part of the problem from the part mentioned in the question.

I'm sorry for the misunderstanding, but if page2.html says everything, add a closing tag for 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 = "Sales"
                   page="page1.html"
                   active="true"></ons-tabbar-item>
  <ons-tabbar-item
                   icon="heart"
                   label = "Customer List"
                   page="page2.html">/ons-tabbar-item>
  <ons-tabbar-item
                   icon="star"
                   label = "Ranking"
                   page="page3.html">/ons-tabbar-item>
  <ons-tabbar-item
                   icon="gear"
                   label = "Settings"
                   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');">Back</span>
    </div>
    <div class="navigation-bar__center">
        Customer List
    </div>  
    <div class="navigation-bar__right">
        <span class="toolbar-button --quiet navigation-bar__line-height" onclick="user_var.pushPage('page3.html')">add</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">Page3</div>
  </ons-toolbar>
</ons-template>

2022-09-30 18:51

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656