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

Question

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?

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

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

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

<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

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:

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

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