使用jQuery在按钮单击上加载HTML文件时面临困难

Question

我并排创建了两个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>

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

这是我在两个按钮之间切换的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

您将需要使用$（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();
  });
});