按钮需要多次单击才能进行更改：jQuery

Question

使用jQuery UI，我将表格加载到带有标签的div中。 单击选项卡后，我需要更改th和tr元素的一些CSS属性。 从技术上讲，一切正常，但是当我单击选项卡时，CSS属性仅在th元素上更改。 我必须再次单击选项卡，才能对tr元素进行更改。 单击选项卡时，我需要同时进行两项更改。 这是我的功能：

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);
  });

};

编辑：使用tabsload更新了代码，一无所获。

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

因为元素尚未显示。 高度将不正确。 您需要侦听要加载的标签页

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