jQuery UI Tabs: Load link in tab / Reload entire page

Question

I'm using jQuery UI (1.10.2) Tabs for my page. I load all links inside the current tab with this code.

<script type="text/javascript">
$(function() {
    $("#assetinfo_tabs").tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("Error reading content. :(" );
            }
        },
        spinner: "<em>Loading</em> <img src='images/ajax-loader.gif'>",
        load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
                    event.preventDefault();
            });
        }
    });
});
</script>

Now I want to be able to add some way to "mark" links and they will reload the entire page when clicked instead of just loading inside the tab. I thought it should be possible by adding a class to the link, and just have the above load-segment to ignore all links with that class, but I can't get it to work.

<script type="text/javascript">
$(function() {
    $("#assetinfo_tabs").tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("Error reading content. :(" );
            }
        },
        spinner: "<em>Loading</em> <img src='images/ajax-loader.gif'>",
        load: function(event, ui) {
            $(ui.panel).delegate('a', 'click', function(event) {
                if (!$(this).hasClass('reload')) {
                    $(ui.panel).load(this.href);
                        event.preventDefault();
                }
            });
        }
    });
});    
</script>

Answer 1

I figured it out! Instead of triggering on "a click" I changed it to ".tablink click", which allows me to add this class to links I want opened within the tab.

It's the opposite of what I was going for, but I'll take it :)

<script type="text/javascript">
$(function() {
    $("#assetinfo_tabs").tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("Error reading content. :(" );
            }
        },
        spinner: "<em>Loading</em> <img src='images/ajax-loader.gif'>",
        load: function(event, ui) {
            $(ui.panel).delegate('.tablink', 'click', function(event) {
                $(ui.panel).load(this.href);
                    event.preventDefault();
            });
        }
    });
});
</script>

Answer 2

I would say that it's not working because $(this) is actually referring to the event, not the tab. Try getting the index of the clicked tab with ui.index, grab that object and check that it has the relevant class.