3

With the latest version of Onsen v1.3.8, I couldn't write specific jquery click events for ons-back-button like below.

$(document).on('click', 'ons-back-button', function(e){
alert('clicked');
});

But, with the older versions like /* onsenui - v1.2.1 - 2014-12-01 */ jquery click events are triggered.

Using latest version /*! onsenui - v1.3.8 - 2015-07-27 */ (onsenui_all.js or onsenui.js), jquery click events not triggered specifically for ons-back-button!

ons-button, ons-list jquery click events are triggering with the latest versions.

Edit:

ng-click event also not triggered

<ons-back-button ng-click="onsPay()"></ons-back-button>

function onsPay()
{
 console.log("Clicked");
}

Any help on this?

UI_Dev
  • 3,317
  • 16
  • 46
  • 92

1 Answers1

2

This is indeed not working after Onsen UI 1.3.0. The reason is an event.stopPropagation() that is executed in ons-navigator to avoid other problems (https://github.com/OnsenUI/OnsenUI/blob/master/core/lib/navigator-page.es6#L43). Perhaps this will change in next versions. Github issue for more info here: https://github.com/OnsenUI/OnsenUI/issues/865

ons-back-button is just triggering myNavigator.popPage(), so meanwhile I would suggest you to use myNavigator.on('prepop', listener) or myNavigator.on('postpop', listener): http://onsen.io/reference/ons-navigator.html#events-summary

Edit: Two workarounds for this.

1 - As I said before, set a listener with a callback after postpop (should be the same than onTransitionEnd:

myNavigator.once('postpop', callback)

You can use on if you want the same callback always or once if only once. Also check off to remove listeners if you don't need them anymore. For example, you can set a specific callback for pageX in its initialization with once that it will be "consumed" with the back button. If in pageX you can push more pages, you can just use nav.off('postpop', callback); nav.pushPage(pageY).

2 - Using only the style of back-button instead of the real component, so you can use onclick normally:

<style>
  .ons-back-button__icon {
    vertical-align: top;
    font-size: 36px;
    margin-left: 8px;
    margin-right: 2px;
    width: 16px;
    display: inline-block;
    padding-top: 1px;
  }
</style>

<ons-toolbar-button class="toolbar-button--quiet" onclick="myNavigator.popPage(options)">
  <ons-icon class="ion-ios-arrow-back ons-back-button__icon"></ons-icon>
  Back
</ons-toolbar-button>

Hope it helps!

Fran Dios
  • 3,482
  • 2
  • 15
  • 26
  • 1
    Great work! But we cannot call myNavigator.popPage(options); for ons-back-button right? It will automatically call popPage(); So, in this scenario, how can we call options to execute at the end of the pop? – UI_Dev Aug 26 '15 at 05:54
  • And also, I need to do some specific click events for different page's ons-back-button, so, by calling prepop listener will apply for all ons-back-button right? Any workaround for this? – UI_Dev Aug 26 '15 at 06:19
  • 1
    Yep. Check the new edit. Both solutions work for that case :) – Fran Dios Aug 26 '15 at 06:27
  • Instead of ons-back-button, you want me to use ons-toolbar-button with the ons-back button style! Am I right? – UI_Dev Aug 26 '15 at 06:39
  • 1
    Yes, although this is only a workaround. Currectly there is no way to modify the options in `ons-back-button`. I would recommend the first solution rather than the second, because in the latter you are not doing `event.stopPropagation()` and that was included in the core precisely to avoid some other problems. I think you can also try to manually trigger `event.stopPropagation()` after `myNavigator.popPage(options)` in the second solution. – Fran Dios Aug 26 '15 at 06:47