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

I trying to make a submenu with the ability to change the page content without the refreshing, so I used AJAX tabs to call an external htm. The tabs are working, but I have a JavaScript inside my external htm which makes the white navigation arrows work, and also crossfades the content, which is not working. How do I fix this?

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

I am talking about this particular page - "Nick 101"
www.adigitalgoodie.com/about.htm

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

It is supposed to work like it does on the frontpage
www.adigitalgoodie.com/index.htm

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

This is the JavaScript inside the htm, fetched via AJAX, which isn't working:

这是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>

3 个解决方案

#1

It seems that script is same for all pages. As such you can just put it in the main html, and use the live/on jquery approach:

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

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

#2

Put that code in a function, and call the function after your ajax request finish

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

#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)')
}

then, when you finished your ajax request, you put $('.contentnavleft').click(myFunc); to bind again the function to the .contentnavleft element.

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

#1