Question

我使用ajax在我的网站上展示内容。单击菜单时，它会打开#content div中的内容。这是我的ajax代码。

$(document).ready(function() {
    $('.menu li a').click(function(){
        var toLoad = $(this).attr('href')+' #content';
        $('#content').animate({"width": "0px"},'normal',loadContent);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent());
        }
        function showNewContent() {
            $('#content').animate({"width": "0px"},'fast');
            $('#content').animate({"width": "664px"},'fast');
        }
        return false;
    });
});

我想在我的ajax内容中使用Fancybox灯箱效果（http://fancybox.net）。以下是Fancybox通常需要的代码。

    <script type="text/javascript" src="js/fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic',
            });
        });
    </script>

我怎样才能使这个工作？ Ajax电话？

Answer 1

首先这一行是错误的

$('#content').load(toLoad,'',showNewContent());

这是说showNewContent()，并指定它返回此事件的任何内容。

应该是

$('#content').load(toLoad,'',showNewContent);

现在它说要分配对这个功能的引用并在需要时运行它。

现在回答你的问题，你需要在加载内容后调用$("a#example4").fancybox({...});，这意味着你可以将它放在函数showNewContent中。

Answer 2

在load回调处理程序中应该是一个函数指针showNewContent()将立即调用该函数。试试这个。

$(document).ready(function() {
    $('.menu li a').click(function(){
        var toLoad = $(this).attr('href')+' #content';
        $('#content').animate({"width": "0px"},'normal',loadContent);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent);
        }
        function showNewContent() {
            $("#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic',
            });
        }
        return false;
    });
});

Fancybox里面有Ajax内容

2 个答案: