jqueryを使用してボタンをクリックしてhtmlファイルをロードする際に問題が発生しました

Question

2つのdivタブを並べて作成しました。最初のdivタグでボタンを作成しました。 2番目のdivタグでは、最初のdivタブのボタンをクリックするとhtmlファイルの機能をロードする必要があります。最初のボタンは、デフォルトで有効になっている必要があります。誰か助けてください！

これは私のhtmlコードです：

<div id="container"> 
    <div id="first"> 
    <button class="button" id="create" href="#create">Creation</button><br> 
    <button class="button" id="insert" href="#insert">Insertion</button><br> 
    </div> 
    <div id="second"> 
    <div class="create"></div> 
    <!--#End of create div--> 
    <div class="insert"></div> 
    <!--#End of insert div--> 
    </div> 
</div> 

これは私のCSSです：

#container { 
    padding: 20px; 
    margin: auto; 
    border: 1px solidgray; 
    height: inherit; 
} 
#first { 
    text-align:center; 
    width: 25%; 
    padding:20px; 
    float: left; 
    height: 350px; 
    border: 1px solid gray; 
    background-color:black; 
} 
#second { 
    width: 70%; 
    float: left; 
    height: inherit; 
    padding-left: 10px; 
    border: 1px red;   
} 
#clear { 
    clear: both; 
} 
div.insert { 
    display: none; 
} 

この2つのボタンの間のトグルのための私のJavascriptです：

$(function(){ 
    $('button#create').click(function() { 
     $('div.create').show(); 
     $('div.insert').hide(); 
    }); 
    $('button#insert').click(function() { 
     $('div.insert').show(); 
     $('div.create').hide(); 
    }); 
}); 

これは私のjavascriptのですボタンがクリックされたときにhtmlファイルをロードする場合：

$.ajax({ 
    url : "createarray.html", 
    dataType: "html", 
    success : function (data) { 
    $(".create").html(data); 
} 
}); 
$.ajax({ 
    url : "insertarray.html", 
    dataType: "html", 
    success : function (data) { 
    $(".insert").html(data); 
} 
}); 

Answer 1

あなたは次のことを試してみてください、あなたのイベントハンドラを初期化するために$（ドキュメント）.ready（関数（）{...}を使用する必要があります。

$(document).ready(function(){ 
    $('button#create').click(function() { 
     $('div.create').show(); 
     $('div.insert').hide(); 
    }); 
    $('button#insert').click(function() { 
     $('div.insert').show(); 
     $('div.create').hide(); 
    }); 
});