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

我正在使用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：

 
 
 
Tab1
 
Tab2
 
 
 
 
 Load Content Again 

Answer 1

如果你的.Button类在加载的内容中，你将需要使用jQuery的实时function。

 $('.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; 在那个function里面。

---

通过查看代码，我不确定为什么要将它设置为在您单击之后才加载选项卡。 同时单击任何选项卡将始终加载相同的内容（url不会更改）。 最后，您不需要使用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 += "" + this.title + "
"; }); $("#Content").html(content + "
Tab Index #" + indx + " on " + (new Date()).toUTCString()); }, error: function(XMLHttpRequest, textStatus, errorThrown) { if (!$('#error').length) $("#Content").prepend('
'); $('#error').html(textStatus + '

'); } }) } 

Answer 2

两件事情：

1. Firefox + Firebug插件是你的朋友。 使用它们。
2. 查找没有 return false;的onClick例程return false; 通过说return 'false你告诉浏览器实际上没有转到href属性中的URL。