javascript - 选项卡处于活动状态时未触发 Ajax Get 方法

Question

加载时我有一个jsp页面，如下所示：

标签A-E是页面加载时的默认标签。您可以看到图像如下：

所以，我想显示以A 到 E开头的人的名字。所以我的 json 数据如下：

我的数据正常，我的 AE 是默认选项卡，其 ID 为“tab01”。所以，我正在使用 AJAX 获取数据，但是click(function()当我点击#tab01时没有触发。我试图在控制台中打印数据但是没有调用ajax方法。但是我不认为click函数在那里，我需要在tab01处于活动状态时调用ajax方法。

$(document).ready(function(){
  var $tabButtonItem = $('#tab-button li'),
      $tabSelect = $('#tab-select'),
      $tabContents = $('.tab-contents'),
      activeClass = 'is-active';

  $tabButtonItem.first().addClass(activeClass);
  $tabContents.not(':first').hide();

  $tabButtonItem.find('a').on('click', function(e) {
    var target = $(this).attr('href');

    $tabButtonItem.removeClass(activeClass);
    $(this).parent().addClass(activeClass);
    $tabSelect.val(target);
    $tabContents.hide();
    $(target).show();
    e.preventDefault();
  });

  $tabSelect.on('change', function() {
    var target = $(this).val(),
        targetSelectNum = $(this).prop('selectedIndex');

    $tabButtonItem.removeClass(activeClass);
    $tabButtonItem.eq(targetSelectNum).addClass(activeClass);
    $tabContents.hide();
    $(target).show();
  });

   $("#tab01").click(function(){
     $.ajax({
               type: 'GET',
               url: A_PAGE_CONTEXT_PATH + "/getAllEmployeeFromAtoE",
               success:function(data){
                var allList=[];
                allList=data;
                 console.log(allList);
               }
               });
   });
});

.tabs {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
#tab-button {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#tab-button li {
  display: table-cell;
  width: 20%;
}
#tab-button li a {
  display: block;
  padding: .5em;
  background: #eee;
  border: 1px solid #ddd;
  text-align: center;
  color: #000;
  text-decoration: none;
}
#tab-button li:not(:first-child) a {
  border-left: none;
}
#tab-button li a:hover,
#tab-button .is-active a {
  border-bottom-color: transparent;
  background: #fff;
}
.tab-contents {
  padding: .5em 2em 1em;
  border: 1px solid #ddd;
}



.tab-button-outer {
  display: none;
}
.tab-contents {
  margin-top: 20px;
}

<div class="tabs">
  <div class="tab-button-outer">
    <ul id="tab-button">
      <li><a href="#tab01">A-E</a></li>
      <li><a href="#tab02">F-I</a></li>
      <li><a href="#tab03">J-M</a></li>
      <li><a href="#tab04">N-R</a></li>
      <li><a href="#tab05">S-Z</a></li>
    </ul>
  </div>
  <div class="tab-select-outer">
    <select id="tab-select">
      <option value="#tab01">Tab 1</option>
      <option value="#tab02">Tab 2</option>
      <option value="#tab03">Tab 3</option>
      <option value="#tab04">Tab 4</option>
      <option value="#tab05">Tab 5</option>
    </select>
  </div>

  <div id="tab01" class="tab-contents">
   <div class="box">
       <div class="container">
        	<div class="row">

   			    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

   					<div class="box-part text-center">

                           <i class="fa fa-instagram fa-3x" aria-hidden="true"></i>

   						<div class="title">
   							<h4>Instagram</h4>
   						</div>

   						<div class="text">
   							<span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
   						</div>

   						<a href="#">Learn More</a>

   					 </div>
   				</div>


   		</div>
       </div>
   </div>
  </div>
  <div id="tab02" class="tab-contents">
    <h2>Tab 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
  </div>
  <div id="tab03" class="tab-contents">
    <h2>Tab 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
  </div>
  <div id="tab04" class="tab-contents">
    <h2>Tab 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
  </div>
  <div id="tab05" class="tab-contents">
    <h2>Tab 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
  </div>
</div>

当tab01处于活动状态时，需要调用 AJAX GET。控制台为空。我该如何处理？

标签： javascriptjqueryhtmlajax