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之后，这确实不起作用。原因是在event.stopPropagation()中执行ons-navigator以避免其他问题（https://github.com/OnsenUI/OnsenUI/blob/master/core/lib/navigator-page.es6#L43）。也许这会在下一版本中发生变化。 Github在这里发布更多信息：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以删除侦听器。例如，您可以在初始化时使用once为pageX设置特定的回调，它将使用后退按钮“消耗”。如果在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>

希望它有所帮助！

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

1 个答案: