jquery onsenui 中的 ons-back-button 没有触发点击事件

Question

使用最新版本的 Onsen v1.3.8，我无法为 ons-back-button 编写特定的 jquery 点击事件，如下所示。

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

但是，像 /* onsenui - v1.2.1 - 2014-12-01 */ jquery 这样的旧版本会触发点击事件。

使用最新版本 /*! onsenui - v1.3.8 - 2015-07-27 */（onsenui_all.js 或 onsenui.js），jquery 没有专门为 ons-back-button!

触发点击事件

ons-button, ons-list jquery 点击事件触发最新版本。

编辑：

ng-click事件也未触发

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

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

有什么帮助吗？

Answer 1

在 Onsen UI 1.3.0 之后这确实不起作用。原因是在ons-navigator中执行了一个event.stopPropagation()以避免其他问题（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只是触发myNavigator.popPage()，所以同时我建议你使用myNavigator.on('prepop', listener)或myNavigator.on('postpop', listener)：http://onsen.io/reference/ons-navigator.html#events-summary

编辑： 两个解决方法。

1 - 正如我之前所说，在 postpop 之后设置一个带有回调的监听器（应该与 onTransitionEnd:

myNavigator.once('postpop', callback)

如果您希望始终使用相同的回调，则可以使用 on，如果只需要一次，则可以使用 once。如果您不再需要监听器，还请检查 off 以删除监听器。例如，您可以在 pageX 的初始化中为它设置一个特定的回调 once，它将是 "consumed" 与后退按钮。如果在 pageX 中你可以推送更多页面，你可以使用 nav.off('postpop', callback); nav.pushPage(pageY).

2 - 只使用后退按钮的样式而不是真正的组件，所以你可以正常使用onclick：

<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>

希望对您有所帮助！

jquery onsenui 中的 ons-back-button 没有触发点击事件

jquery click event not triggered in ons-back-button in onsenui

javascript

jquery

onsen-ui