仅在一个 jquery 选项卡中加载 AJAX 页面

Question

背景： 我有调用 ajax 页面并打印在 DIV 标记中的类别。此 AJAX 页面从数据库中提取内容并分为 2 部分（第 1 部分常规内容显示，第 2 部分 jQuery 选项卡（功能、规范和下载选项卡））。所有选项卡都打印从数据库中获取的信息，但最后一个选项卡，即下载选项卡有另一个 <DIV> 标记，它将加载相关的 PDF 和 ZIP 文件列表以供下载。

问题：我正在尝试在用户单击“下载”选项卡时而不是在此之前加载文件列表。到目前为止，我尝试过的是以下内容。系统无法触发警报消息也返回标签索引 ID

<div id="tabs">
  <ul>
    <li><a href="#tab_feature">Features</a></li>
    <li><a href="#tab_specification">Specifications</a></li>
    <li><a href="#tab_download" data-id="3">Downloads</a></li>
  </ul>

  <div id="tab_feature">
    <div>
        Tab Features
    </div>
  </div>

  <div id="tab_specification">
        Tab Specificications
  </div>

  <div id="tab_download">
    <p>Below listed are the related files that can be downloaded to you PC.</p>
        <div id="downloadFilesList"></div>
  </div>
</div>

<script>
$(function ()
{
   $('#tabs').tabs(
   {
      select: function(event,ui)
      {
          var intSelectedIndex = ui.index;

          alert('selected: ' + intSelectedIndex);

          if (intSelectedIndex == 2)
          {
              $("#downloadFilesList").load('loadfiles.asp', function (response, status, xhr)
              {
                .....
              }
          }
      }
   });
});
</script>

补充一下，我在下面使用jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.0/themes/humanity/jquery-ui.css" rel="stylesheet">

添加JSFiddle

Answer 1

使用

    select: function(event,ui)

改为

    activate: function (event, ui) {

或

    beforeActivate: function( event, ui ) {}

要了解更多关于标签的信息，请阅读Link

编辑

$(document).ready(function ()
{
$('#tabs').tabs(
{
    activate: function (event, ui)
    {
        var intSelectedIndex = ui.index;

        var intSelectedIndexs=ui.newPanel.selector;

        if ($.trim(intSelectedIndexs) == "#tab_download")
        {
        alert("This is Download:");//$('.downloadFakeClass').load('www.google.com');          
        }
    }
 });
});