Facing difficulty while load html file on button click using jquery

Question

I have created two div tabs side by side. In the first div tag I created buttons. In the second div tag I have to load the functionality of a html file when i click the button in the first div tab. The first button should be active by default. Someone please help me!

This is my html code:

<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>

This is my 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;
}

This is my Javascript for toggle between two buttons:

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

This is my javascript for loading html file when a button is clicked:

$.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

You will need to use $( document ).ready(function() {...} to initialize your event handler Try the following:

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