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

Question

我正在使用 jquery 选项卡 (http://docs.jquery.com/UI /API/1.7.2/选项卡）。 Jquery 版本 1.3.2 和 Jquery UI 版本 1.7.2，我已经在 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 />');
  }
 })
}

Answer 2

有两件事：

1. Firefox + Firebug 插件是你的朋友。使用它们。
2. 寻找一个不执行return false;的onClick例程，通过说return 'false，你告诉浏览器不 em> 实际上转到 href 属性中的 URL。