Question

I have a problem with appending pictures in the list pictures that uses photoswipe. The jquery mobile page uses the class gallery-page that will open it in a nice viewer. I try to add more pictures with the append function to the pictures list. This works fine only the problem is when I click on the image it will NOT open it in the nice viewer. I think this is something to do with the class gallery-page. In some way the added pictures by jquery can t find the class gallery-page. What can I do?

这是该页的样子:

外交部:

    <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>

页: 1

    <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>

j:

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

Answer 1

Try calls .photoSwipe on the supplemented culture:

$("#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> )

Updating lists If you add items to a listview, you ll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:
$( #mylist ).listview( refresh );
Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won t be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.

文件:

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

Example:

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

UPDATE:

You might also need to refresh the page as well, like this

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

友情链接