触发 jQuery 分页后 Lightbox 不再工作(jQuery 和 lightbox 冲突)

发布于 2024-11-19 01:30:47 字数 2289 浏览 2 评论 0原文

我们同时使用两个脚本: prettyPhoto< /a> 和 jQuery 分页。当页面首次加载时,两个脚本都在工作。但是,当我单击分页的第 2 页时,灯箱不再显示,但我仍然可以从一页转到下一页。这些是两者的初始化脚本:

jQuery Pagination:

<script type="text/javascript">

            // This is a very simple demo that shows how a range of elements can
            // be paginated.
            // The elements that will be displayed are in a hidden DIV and are
            // cloned for display. The elements are static, there are no Ajax 
            // calls involved.

            /**
             * Callback function that displays the content.
             *
             * Gets called every time the user clicks on a pagination link.
             *
             * @param {int} page_index New Page index
             * @param {jQuery} jq the container with the pagination links as a jQuery object
             */
            function pageselectCallback(page_index, jq){
                var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
                $('#Searchresult').empty().append(new_content);
                return false;
            }

            /** 
             * Initialisation function for pagination
             */
            function initPagination() {
                // count entries inside the hidden content
                var num_entries = jQuery('#hiddenresult div.result').length;
                // Create content inside pagination element
                $("#Pagination").pagination(num_entries, {
                    callback: pageselectCallback,
                    items_per_page:1 // Show only one item per page
                });
             }

            // When document is ready, initialize pagination
            $(document).ready(function(){                  
                initPagination();
            });
</script>

prettyPhoto:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

有人知道冲突在哪里吗?谢谢。

We are using two scripts at the same time: prettyPhoto and jQuery pagination. When the page first loads, both of the scripts are working. However, when I click on Page 2 of the pagination, the lightbox no longer shows but I can still go from one page to the next. These are the initialization scripts for both:

jQuery Pagination:

<script type="text/javascript">

            // This is a very simple demo that shows how a range of elements can
            // be paginated.
            // The elements that will be displayed are in a hidden DIV and are
            // cloned for display. The elements are static, there are no Ajax 
            // calls involved.

            /**
             * Callback function that displays the content.
             *
             * Gets called every time the user clicks on a pagination link.
             *
             * @param {int} page_index New Page index
             * @param {jQuery} jq the container with the pagination links as a jQuery object
             */
            function pageselectCallback(page_index, jq){
                var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
                $('#Searchresult').empty().append(new_content);
                return false;
            }

            /** 
             * Initialisation function for pagination
             */
            function initPagination() {
                // count entries inside the hidden content
                var num_entries = jQuery('#hiddenresult div.result').length;
                // Create content inside pagination element
                $("#Pagination").pagination(num_entries, {
                    callback: pageselectCallback,
                    items_per_page:1 // Show only one item per page
                });
             }

            // When document is ready, initialize pagination
            $(document).ready(function(){                  
                initPagination();
            });
</script>

prettyPhoto:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Anyone knows where the conflict lies? Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

贪了杯 2024-11-26 01:30:47

我找到了问题的解决方案(我在另一个论坛上找到了):

我只需要插入 $("a[rel^='prettyPhoto']").prettyPhoto();在函数 pageselectCallback 中,如下所示:

function pageselectCallback(page_index, jq){
                var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
                $('#Searchresult').empty().append(new_content);
                $("a[rel^='prettyPhoto']").prettyPhoto();
                return false;
            }

如果我只能给回答它的人 +1 这里。 :)

I found a solution to my problem (which I found on another forum):

I just need to insert $("a[rel^='prettyPhoto']").prettyPhoto(); inside the function pageselectCallback like so:

function pageselectCallback(page_index, jq){
                var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
                $('#Searchresult').empty().append(new_content);
                $("a[rel^='prettyPhoto']").prettyPhoto();
                return false;
            }

If I could only give +1 to the guy who answered it here. :)

荆棘i 2024-11-26 01:30:47

尝试使用 Jquery .delegate()

$("a").delegate("[rel^='prettyPhoto']", "load", function()
    {

        $("a[rel^='prettyPhoto']").prettyPhoto();

    });

try using Jquery .delegate()

$("a").delegate("[rel^='prettyPhoto']", "load", function()
    {

        $("a[rel^='prettyPhoto']").prettyPhoto();

    });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文