Question

我正在使用jquery标签（http://docs.jquery.com/UI/API/1.7.2/Tabs）。 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);

但是这也不起作用，按下按钮时我的select方法永远不会被调用

这是我的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的live功能。

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

两件事：

Firefox + Firebug插件是你的朋友。使用它们。
查找不执行return false;的onClick例程说明return 'false您告诉浏览器不实际转到该网址在href属性中。

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

2 个答案: