Button requires multiple clicks to make changes: jQuery

Question

Using jQuery UI, I am loading tables into a div with tabs. When a tab is clicked, I need to change some CSS properties on the th and tr elements. Technically, everything works but when I click a tab, the CSS properties are only changed on the the th elements. I have to click the tab again for the changes to be made to the tr elements. I need both changes to happen when the tab is clicked. Here is my function:

var setHeadingHeight = function() {

  $('.ui-tabs-nav li a').click(function() {
    var getHeadingHeight = $("#new-locations-tabs .ui-tabs-panel:visible .right-table th").css("height");
    var getRowHeight = $("#new-locations-tabs .ui-tabs-panel:visible .left-table tr").css("height");

    $("#new-locations-tabs .ui-tabs-panel:visible .left-table th").css("height", getHeadingHeight);
    $("#new-locations-tabs .ui-tabs-panel:visible .right-table tr").css("height", getRowHeight);
  });

};

Edit: Updated code with tabsload, stil nothing.

$( "#new-locations-tabs" ).on( "tabsload", function( event, ui ) {
    $('.ui-tabs-nav li a').click(function() {
      var test = $("#new-locations-tabs .ui-tabs-panel:visible .right-table th").css('height');
      var testa = $("#new-locations-tabs .ui-tabs-panel:visible .left-table tr").css('height');

      $("#new-locations-tabs .ui-tabs-panel:visible .left-table th").css("height", test );
      $("#new-locations-tabs .ui-tabs-panel:visible .right-table tr").css("height", testa);
    });
});

Answer 1

Because the elements are not shown yet. Heights will be not correct. You need to listen for the tab to be loaded

$( ".selector" ).on( "tabsload", function( event, ui ) {
    //set height here
} );