单击时元素消失

Question

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

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

非常感谢任何帮助。看来这个问题超出了我的能力范围: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>

Answer 1

Click the images. If nothing happens, go to page2 and then back to page1 and try clicking again...

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

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

The clicked image disappears when clicked which makes the page transition look messy.

如果您将图像的克隆添加到 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>

单击时元素消失

Element disappears when clicked

html

css

zepto

single-page-application

hybrid-mobile-app