[F7-Core] FAB as View child event fires multiple times

Hi, I’m trying to use FAB / Floating Action Button on every page.

I put the FAB as view child:

  <div class="view view-main view-init safe-areas" data-url="/">

    <!-- Floating Action Button -->
    <div class="fab fab-left-bottom cart-fab">
      <a href="#">
        <i class="cart-icon icon fas fa-shopping-cart md-only"></i>
        <i class="cart-icon icon f7-icons ios-only">cart</i>


It displays correctly and on every page.

The problem is when I use On Click event it fires multiple times when you navigate.
For example if you navigate through 3 routes, and then click the FAB, the click event will fire 3 times.

I put the On Click event on the same app.f7.html page that contains the main-view. Like this:

    export default {
        on: {
            pageInit() {
                var self = this;
                var app = self.$app;
                var $ = self.$;

                var shopIdParam = app.view.main.router.currentRoute.params.shopId;

                $('.cart-fab').on('click', function() {
                    console.log("click cart-fab");
                    let itemList = listItems(storeIdParam);
                    if (itemList.length > 0) {
                            name: 'cart',
                            params: {
                                shopId: shopIdParam,
                    } else {
                        app.dialog.alert("Empty cart.");

Could the problem be that I’m using On Click event on PageInit()?

If so, where should I put this logic event?

Another thing I’ve found it’s that the F7-Icon doesn’t show on iOS when I put the FAB as View child.
On Android (MD) it loads the FontAwesome icon correctly.

Because you add and add event listeners to same FAB button. You need to properly detach your click event when on pageBeforeRemove

Thank you.

on: {
     pageBeforeRemove() {

Did the trick.

What about the FAB F7-Icon not showing on iOS?