通过将图片附加到列表中，它将找不到页面类

Question

我在使用 photoswipe 的列表图片中添加图片时遇到问题。 jquery 移动页面使用类gallery-page 将在一个漂亮的查看器中打开它。 我尝试使用附加功能将更多图片添加到图片列表中。 这很好用，只是问题是当我单击图像时，它不会在漂亮的查看器中打开它。 我认为这与类画廊页面有关。在某种程度上，通过 jquery 添加的图片找不到类画廊页面。 我能做什么？

页面是这样的：

头部中的Javascript：

    <script type="text/javascript">
        /*
         * IMPORTANT!!!
         * REMEMBER TO ADD  rel="external"  to your anchor tags. 
         * If you don't this will mess with how jQuery Mobile works
         */

        (function(window, $, PhotoSwipe){

            $(document).ready(function(){

                $('div.gallery-page')
                    .live('pageshow', function(e){

                        var 
                            currentPage = $(e.target),
                            options = {},
                            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));

                        return true;

                    })

                    .live('pagehide', function(e){

                        var 
                            currentPage = $(e.target),
                            photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

                        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                            PhotoSwipe.detatch(photoSwipeInstance);
                        }

                        return true;

                    });

            });

        }(window, window.jQuery, window.Code.PhotoSwipe));

    </script>  

正文中的页面：

    <div data-role="page" data-add-back-btn="true" id="Gallery" class="gallery-page" >
        <div data-role="header">
            <div data-role="navbar"> 
                <ul>
                    <li><a href="#spots" data-transition="none" data-direction="reverse"><img src="images/m1.png"/></a></li>
                    <li><a href="#addspots_page1" data-transition="none" data-direction="reverse"><img src="images/m2.png"/></a></li>
                    <li><a href="#internetspots" data-transition="none" data-direction="reverse"><img src="images/m3.png"/></a></li>
                </ul>
            </div><!-- /navbar --> 
        <h2>Extra information</h2> 
        </div><!-- /header -->


        <div data-role="content">   
        <ul class="gallery" id="pictures" >
        <!-- is necessery because photoswipe can't have null images -->
        <li class="s1"><a href="images/no_photo.jpg" rel="external"><img src="image1.jpeg" alt="Image 001" /></a><p>s1</li>
        </ul>

        </div>

    </div>

用jquery追加图片：

    $("#pictures").append('<li class="s2"><a href="image2.jpeg" rel="external"><img src="image2.jpeg" alt="Image 001" /></a></li>'</li>') 

Answer 1

尝试在附加图像上调用.photoSwipe：

$("#pictures")
    .append('<li class="s2"><a href="image2.jpeg" rel="external"><img src="image2.jpeg" alt="Image 001" /></a></li>'</li>')
    .find("a").photoSwipe(options);

Answer 2

1- 这是语法错误还是只是发布问题时的错误

// extra single quote and closing tag next to the closing </li> element
$("#pictures").append('<li class="s2"><a href="image2.jpeg" rel="external"><img src="image2.jpeg" alt="Image 001" /></a></li>'</li>') 

应该是

$("#pictures").append('<li class="s2"><a href="image2.jpeg" rel="external"><img src="image2.jpeg" alt="Image 001" /></a></li>')

更新列表如果您将项目添加到列表视图，您需要在其上调用 refresh() 方法来更新样式并创建任何 添加的嵌套列表。例如：

$('#mylist').listview('refresh');

请注意，refresh() 方法仅影响附加到 列表。这样做是出于性能原因。任何列表项已经 刷新过程将忽略增强。这意味着如果 您更改已增强列表上的内容或属性 项目，这些不会被反映。如果要更新列表项， 在调用刷新之前用新的标记替换它。

文档：

• http://jquerymobile.com/demos/1.0rc3/docs/lists/docs-lists.html

例子：

// using the id of your <ul> tag
$('#pictures').listview('refresh');

更新：

您可能还需要刷新页面，像这样

// id="Gallery"
$('#Gallery').trigger('create');