单击时元素消失答案

【问题标题】：Element disappears when clicked单击时元素消失
【发布时间】：2017-11-22 20:55:20
【问题描述】：

我正在使用 App.js（Javascript UI 库）和 Zepto.js（类似 JQuery 的库）来制作移动应用程序。下面的代码不是来自我的应用程序，而是演示了我遇到的确切问题。我试图让它尽可能短。被点击的图像在 page2 上再次显示之前应该在 page1 上保持可见，但现在点击的图像在 page1 上消失了，这使得到 page2 的过渡看起来很混乱。

点击图片。如果没有任何反应，请转到第 2 页，然后返回第 1 页并尝试再次单击以查看问题。

非常感谢任何帮助。看来这个问题超出了我的能力：D 我的猜测是这与我正在使用的库有关。

App.load('page1');

    App.controller('page1', function(page) {
      $(page).find('img').on('click', function() {

        App.load('page2');
        $('#clicked-img-container').html($(this));

      });
    });
    
    App.controller('page2', function(page) {
      
    });

img {
      width: 150px;
      height: 100px;
    }

<!DOCTYPE html>
<html>

<head>

  <!-- Default stylesheet provided with App.js.
    Contains iOS/Android styles for all included widgets. -->
  <link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">


</head>

<body>

  <!-- Page1 -->
  <div class="app-page" data-page="page1">
    <div class="app-topbar">
      <h1>Page 1</h1>
    </div>
    <div class="app-content">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Red_squirrel_%28Sciurus_vulgaris%29.jpg">
      <img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Lightmatter_lioness.jpg">
      <div class="app-button" data-target="page2">Go to page 2</div>
      <p>Click the images. If nothing happens, go to page2 and then 
      back to page1 and try clicking again to see the problem I'm experiencing: 
      <strong>The clicked image disappears when clicked which makes the page transition look messy.</strong></p>
    </div>
  </div>

  <!-- Page1 -->
  <div class="app-page" data-page="page2">
    <div class="app-topbar">
      <h1>Page 2</h1>
    </div>
    <div class="app-content">
      <div id="clicked-img-container"></div>
      <div class="app-button" data-target="page1">Go to page 1</div>
    </div>
  </div>

  <!-- jQuery-like library focusing on being lightweight and mobile-friendly -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>

  <!-- core module containing all library functionality -->
  <script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</body>

</html>

【问题讨论】：

欢迎来到 SO。 +1 用于创建一个最小的、可验证的示例！
我更新了答案

标签： html css single-page-application hybrid-mobile-app zepto

【解决方案1】：

点击图片。如果没有任何反应，请转到第 2 页，然后返回第 1 页并尝试再次单击...

我不熟悉这个框架，但我认为这里的问题是您的代码正在尝试查找元素，以便在将控制器实际添加到 DOM 之前向它们添加控制器。我从入门页面下载了示例：http://code.kik.com/app/3/docs.html 并注意到有不同的方法，所以我在添加控制器后添加了以下代码：

try {
  App.restore();
} catch (err) {
  App.load('page1');
}

点击后点击的图片消失，页面过渡看起来很乱。

如果您将图像的克隆添加到 DOM，则可以解决此问题：

$('#clicked-img-container').html($(this).clone());

此外，默认转换是fade，这对于您的情况可能会很混乱。您可以使用here 提供的选项。我已经添加了slide-left 来告诉你怎么做。

工作示例如下：

//App.load('page1');

App.setDefaultTransition('slide-left'); // global

App.controller('page1', function(page) {

  $(page).find('img').on('click', function() {
    
    App.load('page2');
    $('#clicked-img-container').html($(this).clone());

  });
});

App.controller('page2', function(page) {

});

try {
  App.restore();
} catch (err) {
  App.load('page1');
}

img {
  width: 150px;
  height: 100px;
}

<!DOCTYPE html>
<html>

<head>

  <!-- Default stylesheet provided with App.js.
    Contains iOS/Android styles for all included widgets. -->
  <link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">


</head>

<body>

  <!-- Page1 -->
  <div class="app-page" data-page="page1">
    <div class="app-topbar">
      <h1>Page 1</h1>
    </div>
    <div class="app-content">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Red_squirrel_%28Sciurus_vulgaris%29.jpg">
      <img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Lightmatter_lioness.jpg">
      <div class="app-button" data-target="page2">Go to page 2</div>
      <p>Click the images. If nothing happens, go to page2 and then back to page1 and try clicking again to see the problem I'm experiencing:
        <strong>The clicked image disappears when clicked which makes the page transition look messy.</strong></p>
    </div>
  </div>

  <!-- Page2 -->
  <div class="app-page" data-page="page2">
    <div class="app-topbar">
      <h1>Page 2</h1>
    </div>
    <div class="app-content">
      <div id="clicked-img-container"></div>
      <div class="app-button" data-target="page1">Go to page 1</div>
    </div>
  </div>

  <!-- jQuery-like library focusing on being lightweight and mobile-friendly -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>

  <!-- core module containing all library functionality -->
  <script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</body>


</html>

【讨论】：

太棒了！非常感谢朋友！ :) 解决了我的问题。现在我可以为客户制作我的应用程序的演示视频了。