0

我有使用fancybox的小图片库。所以在每张图片上都有一个悬停和弹出效果。下面是我的代码

<div class="one-third column hover">
               <a href="large/28crowview_ld.jpg" class="image-box">
                <div class="photo">
                <span class="text"><span class="anchor"></span></span>
                </div>          
                <img src="large/28crowview_ld.jpg" height="170px" width="260px"/>       
        </a>                        
    </div>

上面的代码完美运行。

但是我使用了一个 ajax 控制器，它使用回显返回上述代码

   echo '<div class="one-third column hover">
                   <a href="large/28crowview_ld.jpg" class="image-box">
                    <div class="photo">
                    <span class="text"><span class="anchor"></span></span>
                    </div>          
                    <img src="large/28crowview_ld.jpg" height="170px" width="260px"/>       
            </a>                        
        </div>';

但是当我使用回声标签时，图像会显示，但悬停效果不可见。这很奇怪。我也在我的社交栏上注意到了同样的问题。

当我在 html 视图中使用它时，它工作得很好。但是当我回显时，我在源代码中看到了代码，但图标不可见

echo '<div class="supersocialshare" data-networks="facebook,google,twitter,linkedin,pinterest" data-url="'.$share.'" data-orientation="line"></div>';

所有图像都正确放置，没有js冲突。

下面是我使用的java脚本

<script type="text/javascript">
$(document).ready(function() {

    var track_click = 0; //track user click on "load more" button, righ now it is 0 click

    var total_pages = <?php echo $total_pages; ?>;
    $('#results').load("<?php echo base_url() ?>fetch_pages", {'page':track_click}, function() {track_click++;}); //initial data to load

    $(".load_more").click(function (e) { //user clicks on button

        $(this).hide(); //hide load more button on click
        $('.animation_image').show(); //show loading image

        if(track_click <= total_pages) //make sure user clicks are still less than total pages
        {
            //post page number and load returned data into result element
            $.post('<?php echo base_url() ?>fetch_pages',{'page': track_click}, function(data) {

                $(".load_more").show(); //bring back load more button

                $("#results").append(data); //append data received from server

                //scroll page to button element
                $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);

                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received

                track_click++; //user click increment on load button

            }).fail(function(xhr, ajaxOptions, thrownError) { 
                alert(thrownError); //alert any HTTP error
                $(".load_more").show(); //bring back load more button
                $('.animation_image').hide(); //hide loading image once data is received
            });


            if(track_click >= total_pages-1)
            {
                //reached end of the page yet? disable load button
                $(".load_more").attr("disabled", "disabled");
            }
         }

        });
});
</script>

在 fetch_pages 里面

    $page_number = filter_var($this->input->post('page'), FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

        //throw HTTP error if page number is not valid
        if(!is_numeric($page_number)){
            header('HTTP/1.1 500 Invalid page number!');
            exit();
        }

        $item_per_page = 5;

        //get current starting point of records
        $position = ($page_number * $item_per_page);

        $cottages = $this->properties->getstuff($sub_location,$position, $item_per_page);

       foreach ($props as $cots):

                 echo'<div class="container section" id="'.$cots["id"].'">
                        <div class="one-third column hover">
                        <a href="'.$cots["image_url"].'" class="image-box">
                                <div class="photo">
                                    <span class="text"><span class="anchor"></span></span>
                                </div>          
                                 <img src="'.$cots["image_url"].'" height="170px" width="260px"/>

                                </a>                        

                        </div>';
 endforeach;

我正在使用 codeigniter、php 和 jquery 构建这个项目。任何帮助将不胜感激。

4

3 回答 3

1

您似乎在理解 Web 应用程序的整体架构、客户端浏览器上发生的事情以及服务器上发生的事情、php 所做的事情等方面存在一些严重的问题。你应该读一读。

但是，您的问题很可能与您的悬停和弹出效果正在通过与此等效的方式完成的事实有关：

$(".hover").on("hover",function () {
  // BLAH
});

如果是这种情况，那么在附加事件处理程序（即通过 ajax）之后加载的任何具有类悬停的元素都不会附加该事件处理程序，一个简单的解决方法是将事件处理程序附加到容器并使用委托的事件处理程序，如下所示：

$(document).on("hover",".hover",function () {
  // This handler is attached to the document but applies to any .hover elements inside it
});

另一个解决方法是在通过 ajax 加载元素后运行将“fancybox”功能附加到元素的任何函数。没有一些参考代码很难做到正确，但我认为它会是这样的：

$.get(url, function (data) {
  var elem = $(data);
  $("#container").append(elem);
  elem.fancybox();
});
于 2013-04-17T11:43:12.167 回答
0

请为您提供 JavaScript 代码，我想扔我的一分钱。我敢打赌您使用的是hover方法而不是live hover或on hover函数，如下所示：

jQuery('#div').click(...); // this will work fine if you place your code in page not posted back from ajax request or dynamically created
jQuery('#div').live('click',...); // this will work even if the element was created dynamically or from ajax request.

jQuery“实时”链接

jQuery“打开”链接

还有一件事，请注意该live功能已被弃用并从 jQuery 1.9 中删除

于 2013-04-17T11:41:49.247 回答
0

根据anpsmn评论我不得不重新初始化完整的fancybox插件

$(window).load(function() {

它工作得很好..

于 2013-04-17T12:18:12.213 回答