Popup create with on: events not working

I can’t get the following popup on: open: event to fire in my app.js file

{routes ....},
  name: 'Page Name',
  path: '/path/',
  url: '/pagename.asp',
  on: {
    pageAfterIn: function(e, page) {
	  var myPopup = app.popup.create({
	     el: '.myclass',
	     on: { 
              open: function(popup) {
                console.log('doesnt work');
      $('.myclass').on('popup:open', function() {
        console.log('this works fine');

Does anyone know why only the second approach works but not the first? Thanks!

You should move this logic to pageInit, because pageAfterIn can be called multiple times for same page, when going back and forward. Also make sure there is only one popup with myclass class in DOM