Question

我正在使用＆＃34;固定＆＃34;在我的主页中带有导航栏的样式布局页面，我也想在弹出窗口中使用它。在我的主页面中，一切正常，我可以使用导航栏中的链接/图标来触发某些事件。但是，当将相同的结构复制到弹出窗口时，我无法触发任何事件。

在我的主页面中，所有人都使用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代码，但没有任何反应。我可以在控制台中看到类navbarIcon确实变为活动但仍然没有触发JS代码。当我添加一个＆＃34; close-popup＆＃34;对于类，弹出窗口关闭但没有别的

我尝试捕捉弹出窗口的关闭/关闭但这也导致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函数中包含具有弹出窗口的代码。

使用动态弹出框架frame7在导航栏中链接

2 个答案: