Jquery在onsenui的on -back按钮中没有触发点击事件

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

本文关键字：事件 onsenui on 按钮 -back Jquery      更新时间：2023-09-26

在最新版本的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");
}

有什么帮助吗?

这在Onsen UI 1.3.0之后确实不工作了。原因是在ons-navigator中执行event.stopPropagation()以避免其他问题(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

Edit:有两种解决方法。

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

myNavigator.once('postpop', callback)

你可以使用on如果你想要相同的回调总是或once如果只有一次。如果您不再需要侦听器，也请检查off以删除它们。例如，您可以在pageX的once初始化中为其设置一个特定的回调，它将被返回按钮"消耗"。如果在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>

希望有帮助!

相关文章：