【问题标题】:Lightbox Not Working on AJAX Load Parts灯箱不适用于 AJAX 加载部件
【发布时间】:2011-10-04 18:56:10
【问题描述】:

我有一个包含 5 张图片的页面和一个使用 AJAX 加载更多图片的按钮。我正在使用此脚本加载其余图片:

<script type="text/javascript">
                        $(document).ready(function(){
                            $("#loadmorebutton").click(function (){
                                $('#loadmorebutton').html('<img src="<?php bloginfo('template_url'); ?>/img/ajax-loader.gif" />');
                                $.ajax({
                                    url: "<?php bloginfo('template_url'); ?>/includes/loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                                    success: function(html){
                                        if(html){
                                            $("#wallPosts").append(html);
                                            $('#loadmorebutton').html('Load More');
                                        }else{
                                            $('#loadmorebutton').replaceWith('<center>No more posts to show.</center>');
                                        }
                                    }
                                });
                            });
                        });
                    </script>

首先,显示 5 张图片,当用户点击旧帖子时,会加载更多 5 张图片。现在我的问题是,虽然所有图片都具有相同的代码/类/结构,但灯箱仅适用于前 5 张图片,不适用于 AJAX 加载的那张。有人可以帮我解决这个问题吗?

【问题讨论】:

    标签: javascript jquery ajax


    【解决方案1】:
    $(document).ready(function(){
        $("#loadmorebutton").live('click', function (){
            $('#loadmorebutton').html('<img src="<?php bloginfo('template_url'); ?>/img/ajax-loader.gif" />');
            $.ajax({
                url: "<?php bloginfo('template_url'); ?>/includes/loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                success: function(html){
                    if(html){
                        $("#wallPosts").append(html);
                        $('#loadmorebutton').html('Load More');
                    }else{
                        $('#loadmorebutton').replaceWith('<center>No more posts to show.</center>');
                    }
                }
            });
        });
    });
    

    使用 jQuery.Live() 将事件附加到将通过 AJAX 添加到页面的对象。否则,事件仅在调用函数时与页面上的元素相关联。文档可以找到here

    【讨论】:

    • 你能帮我转换一下这个吗? '$(document).ready(function () { $('#commentBox').hide(); $('#comment').click(function () { $('#commentBox').show(); }); });'
    • 您是想让每个评论框在加载时隐藏,还是通过 css 执行此操作?我会将css默认为 display:none ,然后您不需要隐藏线,只需在您的 document.ready() $('#comment&lt;?php echo $row[' id ']; ?&gt;').live('click', function () { $('#commentBox&lt;?php echo $row[' id ']; ?&gt;').show(); }); 中使用以下内容
    • 如果这解决了您的问题,请将其标记为答案;否则问题将继续显示为未回答。
    猜你喜欢
    • 2014-07-14
    • 2012-08-13
    • 1970-01-01
    • 2016-03-01
    • 1970-01-01
    • 2014-06-23
    • 1970-01-01
    • 2013-09-03
    • 1970-01-01
    相关资源
    最近更新 更多