Question

我尝试创建一个子菜单，能够在不刷新的情况下更改页面内容，因此我使用AJAX选项卡调用外部htm。选项卡正在运行，但我的外部htm中有一个JavaScript，它使白色导航箭头工作，并且还交叉淡化内容，这是无效的。我该如何解决这个问题？

我在谈论这个特殊的页面 - “尼克101” www.adigitalgoodie.com/about.htm

它应该像在首页上那样工作 www.adigitalgoodie.com/index.htm

这是htm中的JavaScript，通过AJAX获取，无法正常工作：

<script type="text/javascript">

        $('.contentnavright').click(function(){
            $('.contenttext1').fadeOut();
            $('.contenttext2').fadeIn();
            $('.contentnavleft').css('opacity', '1');
            $('.contentnavleft').css('-moz-opacity', '1');
            $('.contentnavleft').css('filter', 'alpha(opacity=100)');
            $('.contentnavright').css('opacity', '0');
            $('.contentnavright').css('-moz-opacity', '0');
            $('.contentnavright').css('filter', 'alpha(opacity=0)')     
        });

        $('.contentnavleft').click(function(){
            $('.contenttext1').fadeIn();
            $('.contenttext2').fadeOut();
            $('.contentnavleft').css('opacity', '0');
            $('.contentnavleft').css('-moz-opacity', '0');
            $('.contentnavleft').css('filter', 'alpha(opacity=0)');
            $('.contentnavright').css('opacity', '1');
            $('.contentnavright').css('-moz-opacity', '1');
            $('.contentnavright').css('filter', 'alpha(opacity=100)')
        });

        </script>

Answer 1

似乎所有页面的脚本都相同。因此，您可以将它放在主html中，并使用live / on jquery方法：

$("#container").on("click", ".contentnavright", function(){whatever});

Answer 2

将该代码放入函数中，并在ajax请求完成后调用该函数

Answer 3

$('.contentnavleft').click(myFunc);  

function myFunc(){
   $('.contenttext1').fadeIn();
   $('.contenttext2').fadeOut();
   $('.contentnavleft').css('opacity', '0');
   $('.contentnavleft').css('-moz-opacity', '0');
   $('.contentnavleft').css('filter', 'alpha(opacity=0)');
   $('.contentnavright').css('opacity', '1');
   $('.contentnavright').css('-moz-opacity', '1');
   $('.contentnavright').css('filter', 'alpha(opacity=100)')
}

然后，当你完成ajax请求时，你将$('.contentnavleft').click(myFunc);再次绑定到.contentnavleft元素。

AJAX调用后JavaScript无法正常工作--AJAX标签

3 个答案: