How to attach event listeners on popup opened via router

1

I’m building a search popup that will be used across my app.

I have the following in routes.js

{
    path: '/search/',
    popup: {
      component: SearchPopup,
    },
  },

In my SearchPopup template, I was initially unable to get the popup:open and popup:opened events to work. Here’s what I had:

export default (props, { $, $f7, $f7router, $on }) => {

  $('.search-popup').on('popup:open', function (e) {
        console.log('Search popup open');  //never fires
  })
   $('.search-popup').on('popup:opened', function (e) {
        console.log('Search popup opened');  //never fires
  })

I then moved the listener attachments into $onMounted and everything worked fine

export default (props, { $, $f7, $f7router, $on, $onMounted }) => {

  $onMounted(() => {
    
    $('.search-popup').on('popup:open', function (e) {
          console.log('Search popup open');  // fires
    })
     $('.search-popup').on('popup:opened', function (e) {
          console.log('Search popup opened');  // fires
    })

})

For anyone who’s struggling to attach events in routable modals, I thought this would be helpful info.

1 Like
2

or => blissful-joana-30pjnc

1 Like