Javascript 使用jquery在点击按钮时加载html文件面临困难

我已经创建了两个并排的div选项卡。在第一个div标记中，我创建了按钮。在第二个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>

这是我的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);
}
});

您需要使用$（document）.ready（function（）{…}来初始化事件处理程序，请尝试以下操作：

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

---

这还不够吗？

$（function（）{

）？我认为这不足以让代码正常工作，除非包装在.ready（function（）{..}）中

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