'ELM : Dialog events not fire using Framework7

Elm :

div [id "app", class "view view-main"] [
              button [ class "col button open-confirm"  ] [ text "Confirm" ] -- no function now 
       ]

index.html

<html>
   <head>
     <title> Confirm </title>
         <meta charset = "utf-8" >
         <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
     <link rel="stylesheet" href="node_modules/framework7/css/framework7.bundle.min.css">
     <link rel="stylesheet" href="framework7/customStyling/index.js">
     <link rel="stylesheet" href="node_modules/framework7-icons/css/framework7-icons.css">

   <script type="text/javascript" src ="app.js" > </script>
   </head>
   <body>
     <main></main>
     <br /><br />
     <script type="text/javascript" src="node_modules/framework7/js/framework7.bundle.min.js"></script>
   <script type="text/javascript" src="framework7/customStyling/index.js"></script>
   <script type="text/javascript" src="node_modules/framework7/js/framework7.min.js"></script>
        <script type="text/javascript" src="node_modules/framework7/js/framework7-lite.bundle.min.js"></script>


   </body>        
 </html>

customStyling/index.js [ The f7 file is the latest , install using npm install framework7]

var app = new Framework7({
  root: '#app',
  name: 'My App',
  id: 'com.myapp.test',
  panel: {
    swipe: 'left',
  },
  accordion: {

  },
  routes: [
    // Add your routes here
    // Example:
    /*
    {
      path: '/about/',
      url: 'about.html',
    },
    */
  ],
});

var $$ = Dom7;

// Confirm
$$('.open-confirm').on('click', function () {
  app.dialog.confirm('Are you feel good today?', function () {
    app.dialog.alert('Great!');
  });
});

There is no errors in console log output May ask why is it not working? The accordions working with the same structure. Any help is appreciate! Thanks in advance!



Solution 1:[1]

$$('.open-confirm').on('click', function () {
  app.dialog.confirm('Are you feel good today?', function () {
    app.dialog.alert('Great!');
  });
});

use below one instead above

$$(document).on('click','.open-confirm', function () {
  app.dialog.confirm('Are you feel good today?', function () {
    app.dialog.alert('Great!');
  });
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user19099507