Jquery选项卡在按钮单击时重新加载内容

Question

我正在使用jquery选项卡(http://docs.jquery.com/UI/API/1.7.2/Tabs).Jquery版本1.3.2和Jquery UI版本1.7.2和Ive一直在firefox 3.5.6中测试.

选择选项卡时,我只需将当前日期添加到内容区域html中.我还有一个类名为"Button"的链接.单击此链接时,我想重新加载当前所选选项卡的内容.但是通过我尝试过的解决方案,我无法让它发挥作用.我可以看到加载了"按钮点击"事件,但以下代码没有重新加载我的数据:

$(".Tabs").tabs('load', $(".Tabs").tabs('option', 'selected'));

我也一直在测试:

var selected = $(".Tabs").tabs('option', 'selected');
$(".Tabs").tabs('select', null);
$(".Tabs").tabs('select', selected);

但这也不起作用,我的选择方法在按下按钮时永远不会被调用

这是我的jquery代码:

    $(function() {
    var $tabs = $(".Tabs").tabs({
        selected: null,
        select: function() {
            alert("this doesn't run on button click");
            //Sets Content's html to current date
            $("#Content").html(new Date);
        }
    });

    $('.Button').click(function() {
        alert("this runs on button click");
        //Here I want to reload the current selected tab
        $(".Tabs").tabs('load', $(".Tabs").tabs('option', 'selected'));
        return false;
    });
    $('.Tabs').tabs('select', 0); // Select first tab
});

这是html:

<div class="Tabs">
    <ul>
        <li><a href="#Content">Tab1</a></li>
        <li><a href="#Content">Tab2</a></li>
    </ul>
    <div id="Content">

    </div>
</div>
<a class='Button' href='#'>Load Content Again</a>

Answer 1

如果你的.Button类在加载的内容中,你将需要使用jQuery 的实时功能.

$('.Button').live('click', function() {
 //Here I want to reload the current selected tab
 $tabs.tabs('load', $tabs.tabs('option', 'selected'));
 return false;
});

此外,由于.Button是一个链接,您需要return false;在该函数内添加.

通过查看代码,我不确定为什么要将它设置为在您单击之后才加载选项卡.同时单击任何选项卡将始终加载相同的内容(网址不会更改).最后,您不需要使用eval()脚本(这可能是问题吗？).

除了这些问题,看起来您的代码应该可行.

我也不确定你的json是如何格式化的,所以我假设以下json格式重写了这个:

({
 "items": [
  { "title": "example 1" },
  { "title": "example 2" },
  { "title": "example 3" },
  { "title": "example 4" },
  { "title": "example 5" },
  { "title": "example 6" },
  { "title": "example 7" },
  { "title": "example 8" },
  { "title": "example 9" },
  { "title": "example 10" }
 ]
})

脚本

$(function() {
 var $tabs = $(".Tabs").tabs({
  selected: null,
  select: function(event, ui) {
   loadTab( ui.index ); // ui.index = index of the clicked tab
  }
 });
 $('.Button').live('click', function() {
  //Here I want to reload the current selected tab
  loadTab( $(".Tabs").tabs('option', 'selected') );
  return false;
 });
 $('.Tabs').tabs('select',0);
});

function loadTab(indx){
 $.ajax({
  type: "GET",
  url: "http://domain.com/Service.svc/get",
  dataType: "json",
  success: function(data) {
   var content = "";
   $.each(data.items, function(items){
    content += "<a class='Button' href='#'>" + this.title + "</a><br>";
   });
   $("#Content").html(content + "<br />Tab Index #" + indx + " on " + (new Date()).toUTCString());
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
   if (!$('#error').length) $("#Content").prepend('<div id="error"></div>');
   $('#error').html(textStatus + '<br /><br />');
  }
 })
}