タブの内容が更新されないようにするボタン

Question

ホームページに複数のタブがあります。そのうちの1つに、その特定のタブのみをリフレッシュする「更新」というボタンがあります。

外部スクリプトファイル：ここに私のコードは

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

タブ構造：

<ul class="tabs"> 
    <li><a href="#sm">SM</a></li> 
    <li><a href="#rm">RM</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab" id="rm"> 
     //code 
    </div> 
    <div class="tab" id="sm">    
     <button id="refresh">REFRESH!</button> 
     //code 
    </div> 
</div> 

jQueryの（私は上記されていない外部ファイルに含まれています） ：

$(document).ready(function(){ 
    $('body').on('click', '#refresh', function(){ 
     var x = $(".tabs").tabs("option", "active");   
     $(".tabs").tabs("load", x); 
    }); 
}); 

ボタンをクリックすると、私のコンソールにエラーが表示されます。 Error: cannot call methods on tabs prior to initialization; attempted to call method 'option'

助けてください！私はこれに非常に新しいですし、この問題を解決することができません！ Googleでこのエラー情報の検索

Answer 1

はへのリンクを示し、以前にstackoverflowの質問を：uncaught exception: cannot call methods on tabs prior to initialization

Answer 2

@KlaraNewbie、

エラーはタブが初期化されていないことを示しています。初期化するには、次のようなものを追加します。

$(".tabs").tabs(); 

前に：

$('body').on('click', '#refresh', function(){ 

また、あなたのHTML構造が正しくありません。

<div id="tabs"> 
    <ul class="tabs"> 
    <li><a href="#sm">SM</a></li> 
    <li><a href="#rm">RM</a></li> 
    </ul> 
    <div class="tab" id="sm"> 
    a tab 
    </div> 
    <div class="tab" id="rm"> 
    <button id="refresh">REFRESH!</button> 
    </div> 
</div> 

をまたにスクリプトを変更します：試してみてください

$(document).ready(function(){ 
    $("#tabs").tabs(); 
    $('body').on('click', '#refresh', function(){ 
     var x = $("#tabs").tabs("option", "active");   
     $("#tabs").tabs("load", x); 
    }); 
});