JQuery UI Tabs inside Dialog - Load Tab content based on Dialog title?

I am cloning a JQuery UI Dialog with nested tabs.

<div class="dialog">
            <div id='tabs'>
                <ul>
                    <li><a href="#presentations">Presentations</a>
                    </li>
                    <li><a href="#outcomes">Learning Outcomes</a>
                    </li>
                    <li><a href="#conditions">Core Conditions</a>
                    </li>
                </ul>
                <div data-type="presentations" id="presentations"></div>
                <div data-type="outcomes" id="outcomes"></div>
                <div data-type="conditions" id="conditions"></div>
            </div>
        </div>

and

var dialogs = $( ".dialog" ).clone().appendTo('body').removeClass( 'dialog' ).dialog( {
                                title: dialogName,
                                width: '383'
                            } ).tabs();

On clicking a tab in the cloned Dialog, I want to load content to that specific tab using Ajax based on the title of the parent Dialog. E.g. something like below (which is not working...):

    $( '.ui-tabs-tab' ).click( function () {
                if ( $( this ).data( 'type' == 'outcomes' ) ) {
                    $.ajax( {
                        type: "POST",
                        url: "scripts/get_learning_event_outcomes.php",
                        data: {
                            learning_event: $(this).parent().dialog( "option", "title" ),
                        },
                        success: function (data) {
                            $( this ).html(data);
                        }
                    } );
                }
            } )

How can I do this? Have I got the click wrong on the Tabs??

from JQuery UI Tabs inside Dialog - Load Tab content based on Dialog title?