jquery效果在php中不可见，如果；“回声”；用于输出

我有一个使用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返回上述代码

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

echo'
';

但是，当我使用echo标记时，图像会显示出来，但悬停效果的任何部分都不可见。这很奇怪。在我的社交酒吧里，我也注意到了同样的问题

当我在html视图中使用它时，它可以完美地工作。但是当我回显时，我看到源代码中的代码，但图标不可见

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

echo'；

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

下面是im使用的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>

$（文档）.ready（函数（）{
var track_click=0；//跟踪用户单击“加载更多”按钮，现在是0单击
var总页数=；
$（“#results”）.load（“fetch#pages”，{'page'：track#click}，function（）{track#click++}）；//要加载的初始数据
$（“.load_more”）。单击（函数（e）{//用户单击按钮
$（this）.hide（）；//单击时隐藏加载更多按钮
$（'.animation_image'）.show（）；//显示正在加载的图像
如果（track_单击请向您提供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.




还有一件事，要小心，
live
函数被弃用并从jQuery 1.9中删除了您似乎在理解web应用程序的总体架构、客户端浏览器上发生了什么、服务器上发生了什么、php做了什么等方面遇到了一些严重的问题。您应该仔细阅读

但是，您的问题很可能与以下事实有关：您的悬停和弹出效果是通过以下等效方式实现的：

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

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

$(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();
});

根据anpsmn的评论，我不得不在

$(window).load(function() {

它工作得很好。
第二种情况中似乎没有包含实现悬停效果的css文件。ajax调用成功后，尝试初始化fancybox。当元素不存在时，您可能正在文档准备就绪状态下进行初始化。@Adder您能再解释一下吗？插入新元素后，就不会绑定任何事件进入DOM。您必须设置花式方框（重新分配）elements Insertedy的事件您的浏览器不关心最终收到的HTML代码是否来自静态文件，是否由脚本动态创建，或者是否由您的祖母缝合在一起。因此，对于此类问题，请先将脚本的输出与静态版本进行比较（您可以在询问之前进行比较）。
$(window).load(function() {