Link 在导航栏中使用动态弹出窗口，framework7

Question

我在我的主页中使用带有导航栏的 "Fixed" 样式布局页面，我也想在弹出窗口中使用它。在我的主页上一切正常，我可以在导航栏中使用 links/icons 来触发某些事件。但是，将相同的结构复制到弹出窗口时，我无法触发任何事件。

在我的主页上，一切正常 HTML:

<div class="views">
  <div class="view view-main">
    <div class="pages">
      <div data-page="index" class="page navbar-fixed toolbar-fixed">
    <!-- Top Navbar-->
    <div class="navbar">
      <div class="navbar-inner">
       <div class="center">Hello</div>
        <div class="right">
          <a href="" class="navbarIcon">
           <i class="f7-icons">add_round</i>
          </a>
       </div>
     </div>
   </div>
    <!-- /End of Top Navbar-->

    <div class="page-content" >
      <div class="content-block">
      ...

我可以使用下面的 JS 来触发基于点击的事件：

$$('.navbarIcon').on('click', function (e) {
console.log("Hello");
});

当对动态弹出窗口使用相同的结构时，我无法触发任何事件。弹出 HTML 是：

    var popupHTML =
    '<div class="popup popup-stats">'+
    '<div class="view view-popup">' +
    '<div class="pages">' +
    '<div data-page="popup-stats" class="page navbar-fixed toolbar-fixed">' +

    '<div class="navbar">' + 
    '<div class="navbar-inner">' +
    '<div class="center">Hello</div>' +
    '<div class="right">' +
    '<a href="" class="navbarIcon">' +
    '<i class="f7-icons">add_round</i>' +
    '</a>' +
    '</div>' +
    '</div>' +
    '</div>' +

    '<div class="page-content">' +
    '<div class="content-block">'+
    ...
    myApp.popup(popupHTML);

我希望通过在弹出窗口中包含此导航栏来触发相同的 JS 代码，但没有任何反应。我可以在控制台中看到 class navbarIcon 确实处于活动状态，但仍然没有触发 JS 代码。当我将 "close-popup" 添加到 class 时，弹出窗口会关闭但没有其他

我尝试捕获弹出窗口的 close/closing 但这也导致 JS 无响应。我试过这个：

$$('.popup-stats').on('popup:opened', function () {
console.log('About Popup opened') 
});
$$('.popup-stats').on('popup:close', function () {
console.log('About Popup is closing')
});
$$('.popup-stats').on('popup:open', function () {
console.log('Services Popup is opening')
});
$$('.popup-stats').on('popup:closed', function () {
console.log('Services Popup is closed')
});
$$('.close-popup').on('click', function () {
console.log('Services Popup is closed')
});

知道如何解决这个问题，以便我可以关闭弹出窗口并使用导航栏中的链接吗？

我还可以补充一点，我尝试从动态弹出窗口切换到动态页面，结果相同。

Answer 1

好的，部分答案找到了！我在 DOM 中的弹出窗口之前添加了我的事件监听器。所以，现在我可以触发 JS:

$$('.close-popup').on('click', function () {
console.log('Services Popup is closed')
});

和

$$('.navbarIcon').on('click', function (e) {
console.log("Hello");
});

将其直接放在 myApp.popup(popupHTML);

之后

但是，我无法触发 'popup:close' 和 'popup:closed' 事件。

有什么想法吗？

Answer 2

只要动态加载新元素，希望你用这种方式监听事件：

$$(document).on('popup:closed', '.popup-stats', function () {
    console.log('Services Popup is closed');
});

另外不要忘记将代码包含在具有弹出窗口的当前页面的 onPageInit 函数中。

Link 在导航栏中使用动态弹出窗口，framework7

Link in navbar using dynamic popup, framework7

html

javascript

html-framework-7