使用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();
  });
});