Jquery选项卡：点击按钮重新加载内容

Question

Jquery选项卡：点击按钮重新加载内容

3

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

但是这也不起作用，当我点击按钮时，我的选择方法从未被调用。

这是我的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>

- Martin

只是澄清一下，这是jQuery UI选项卡还是另一个插件？另外，当你说“选项卡内的按钮”时，你的意思是该选项卡的内容区域有一个按钮，当你点击它时，你希望重新加载该内容，对吗？ - jbnunn

是的，完全正确！抱歉没有表达清楚，我已经更新了问题。我对jquery还比较新，也许我做错了什么..你有解决办法吗？ - Martin

2个回答

0

两件事情：

Firefox + Firebug插件是你的好朋友。一定要使用它们。
寻找一个没有执行return false;的onClick例程。通过使用return 'false'，你告诉浏览器实际上不要跳转到href属性中的URL。

- Peter Rowell

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mottie · Accepted Answer

如果你的 .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;。

从您的代码中看来，我不确定为什么要设置成只有在点击选项卡后才加载。此外，点击任何选项卡都将始终加载相同的内容（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 += "<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 />');
  }
 })
}