使用ajax进行HTML重定向

Question

Working on a website that uses Ajax - http://jasonanarchy.com

I'm trying to get the boxes that hold the images to redirect to their respective websites. (the domains that show when you hover)

Here is the code to one of the box elements:

<a href="http://anarchyplants.com" class="element element-portfolio portfolio ajax">
        <input type="hidden" class="order" value="2">
        <img src="/img/portfolio/aplants.jpg" class="portfolio-image" alt="portfolio image"/>
        <span class="portfolio-title"><i class="icon-play"></i>Anarchy Plants
        </span>
    </a>

My guess is the "Element" call is what makes the box do it's funky ajax thing, but if I remove it, it breaks the box. What would I have to change/edit to get it to work?

I want to keep all elements of the ajax, but have it so when you click it, you actually go to anarchyplants.com

AJAX CLICK LINK:

/* 
     * Ajax link click (mainly for portfolio items but any content can be linked to) 
     */

     $('.ajax').click(function(e){
         e.preventDefault();
         var page = $(this).attr('href');
         $('.container-footer').fadeOut(199);
         $('.last-scroll').val($(document).scrollTop());    //current scroll posn to return to later
         $('html').append('<img src="img/loading.gif" class="load-gif" style="z-index: 999"/>');
         $('.load-gif').css({
                position:'absolute',
                left: ($(window).width() - $('.load-gif').outerWidth())/2,
                top: ($(window).height() - $('.load-gif').outerHeight())/2
            });
         $('#container-isotope').fadeOut(200, function(){
         $.get(page, function(data) {
              $('.load-gif').remove();
              $('.ajax-content').html(data);
              $('#container-isotope').stop().hide();
              $('.container-footer').fadeIn(599);
              $('#container-ajax').fadeIn(600, function(){
                  $('.close-ajax').show();
              });
              window.scrollTo(0,0);
            }); 
         });
     });

     $('.close-ajax').click(function(e){
        e.preventDefault(); 
        $(this).hide();
        $('.container-footer').fadeOut(199);
        $('#container-ajax').fadeOut(200,function(){
            $('#container-isotope').fadeIn(600);
            $('.container-footer').fadeIn(599);
            window.scrollTo(0,$('.last-scroll').val());
            $container.isotope();
            $('#container-ajax .ajax-content').html("");
        });
     });

Any and all help will be greatly appreciated! - Cheers!~

Answer 1

Remove this from the <script> section at the bottom of the page:

/* 
     * Ajax link click (mainly for portfolio items but any content can be linked to) 
     */

     $('.ajax').click(function(e){
         e.preventDefault();
         var page = $(this).attr('href');
         $('.container-footer').fadeOut(199);
         $('.last-scroll').val($(document).scrollTop());    //current scroll posn to return to later
         $('html').append('<img src="img/loading.gif" class="load-gif" style="z-index: 999"/>');
         $('.load-gif').css({
                position:'absolute',
                left: ($(window).width() - $('.load-gif').outerWidth())/2,
                top: ($(window).height() - $('.load-gif').outerHeight())/2
            });
         $('#container-isotope').fadeOut(200, function(){
         $.get(page, function(data) {
              $('.load-gif').remove();
              $('.ajax-content').html(data);
              $('#container-isotope').stop().hide();
              $('.container-footer').fadeIn(599);
              $('#container-ajax').fadeIn(600, function(){
                  $('.close-ajax').show();
              });
              window.scrollTo(0,0);
            }); 
         });
     });

     $('.close-ajax').click(function(e){
        e.preventDefault(); 
        $(this).hide();
        $('.container-footer').fadeOut(199);
        $('#container-ajax').fadeOut(200,function(){
            $('#container-isotope').fadeIn(600);
            $('.container-footer').fadeIn(599);
            window.scrollTo(0,$('.last-scroll').val());
            $container.isotope();
            $('#container-ajax .ajax-content').html("");
        });
     });

Answer 2

Try adding this to the href tag:

target="_top"

or

target="_blank"