Question

我有从外部* .php文件加载div内容的页面。一切都很完美，但是当我想在加载的页面上使用缩放插件时，它不起作用。

我的网页结构：

<div id="wrapper">
<img id="zoom" src="example.jpg"/> /**zoom plugin works here**/
  <a href="external_content">button which onclick load external content</a>
  <div id="external_content">
     <p>a lot of text here</p>
     <img id="zoom2" src="example2.jpg"/> /**zoom plugin doesn't work here**/
  </div>
</div>

我怀疑问题是页面加载后脚本没有执行。我在这个网站上看了很多例子，但没有一个没有帮助我

这是我的.html文件

 <html>
     <head>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/ajax.js"></script>
        <script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/ddpowerzoomer.js"></script>
        <script type="text/javascript">
         jQuery(document).ready(function($){
           $('#zoom').addpowerzoom();
           $('#zoom2').addpowerzoom();
         });
        </script> 
     <head>
    </html>

和加载外部内容的主脚本在这里

jQuery.noConflict()
jQuery(document).ready(function() {
    var hash = window.location.hash.substr(1);
    var href = jQuery('#nav li a').each(function(){
            var href = jQuery(this).attr('href');
        if(hash==href.substr(0,href.length-4)){

            var toLoad = hash+'.html #content_low'+divId;
            jQuery('#content'+divId).load(toLoad);
        }                                           
    });

    jQuery('#nav li a').click(function(){
        divId = jQuery(this).parents('li').attr('id');
        var toLoad = jQuery(this).attr('href')+' #content_low'+divId;

        jQuery('#content'+divId).slideUp(500,loadContent);

        function loadContent() {
            jQuery('#content'+divId).load(toLoad,showNewContent)
        }
        function showNewContent() {
            jQuery('#content'+divId).delay(200).slideDown(800);

            jQuery("#urun_ac").fadeOut(100);


        }
        return false;

    });
});

Answer 1

您必须再次调用回调函数中的缩放功能：

function showNewContent() {
    jQuery('#content'+divId).delay(200).slideDown(800);

    jQuery("#urun_ac").fadeOut(100);

    $('#zoom').addpowerzoom();
    $('#zoom2').addpowerzoom();

}

在.load（）页面之后执行javascript

1 个答案: