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中测试。jquery选项卡重新加载按钮点击内容

选择选项卡时，我只是将当前日期添加到内容区域html。我也有一个类名为“Button”的链接。点击此链接时，我想重新加载当前选定选项卡的内容。但随着我尝试的解决方案，我无法让它工作。我可以看到“按钮，点击”事件被加载，但下面的代码不重装我的数据：

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

我也与测试：

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

但不工作要么，我的选择方法不会被调用按下按钮

时，这是我的jQuery代码：

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

来源

2009-12-12 Martin

只是为了澄清，这是jQuery UI的选项卡或另一个插件？另外，当你说“标签内的按钮”时，你的意思是该标签的内容区域有一个按钮，当你点击它时，你想要重新加载内容，对吧？ – jbnunn 2009-12-12 22:31:04

是的！对不起，我不清楚，我更新了这个问题。我对jQuery相当新，所以也许我做错了什么。你有一个想法如何解决它？ – Martin 2009-12-12 23:31:38

如果您的.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 />'); 
    } 
}) 
}

来源

2009-12-13 04:45:47 Mottie

谢谢！但它没有工作..我更新了问题，我尝试添加返回false并更改为生存，但内容仍未加载。我可以看到“按钮点击”事件运行，但然后我调用加载，但我的内容没有加载。正如你在代码中看到的，我的内容在select中加载：function（e，ui）。调用load时可能select不运行？我究竟做错了什么？ – Martin 2009-12-13 08:59:44

另外我可以看到select：function（e，ui）根本不运行。所以我尝试添加$ tabs.tabs（'select'，$ tabs.tabs（'option'，'selected'））;在我加载数据之前，但不会使选择函数加载。什么可能是错误的？ – Martin 2009-12-13 09:06:51

实际上，我的答案中的函数应该在tab函数之外，但仍在'$（function（）{...}）内。我不得不多看看它，看看为什么select函数没有被调用。 – Mottie 2009-12-13 17:21:57

两件事情：

火狐+ Firebug的插件是你的朋友。使用它们。
查找一个onClick例程，不做return false;按说return 'false你告诉浏览器不真的去到URL的href属性。

来源

2009-12-13 02:29:02

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

回答

相关问题