[英]jQuery - Call function in function with dynamic content (.load())
[英]jQuery Accordion /Tabs - Call different function upon load of content
我有以下标记:
<body>
<div id="tabs" style="float: left">
<ul>
<li><a href="ajax/question_0.html" title="Question 1"><span>Question 1</span></a></li>
<li><a href="ajax/question_1.html" title="Question 2"><span>Question 2</span></a></li>
<li><a href="ajax/question_2.html" title="Question 3"><span>Question 3</span></a></li>
<li><a href="ajax/question_3.html" title="Question 4"><span>Question 4</span></a></li>
<li><a href="ajax/question_4.html" title="Question 5"><span>Question 5</span></a></li>
<li><a href="ajax/question_5.html" title="Question 6"><span>Question 6</span></a></li>
</ul>
<div id="dynamicContent">
</div>
</div>
<div class="demo-description">
<p>Click tabs to see answers to Questions</p>
</div>
</body>
我想使用UI中的手风琴或标签插件。 完成加载事件后,我想调用一个JavaScript函数,但每个选项卡都有一个不同的函数 - 就像调用onDocumentReady一样。
我有以下JavaScript:
$(function() {
$('#tabs').tabs().bind('tabsselect', function(event, ui) {
console.log("Loading: ajax/question_" + ui.index + ".html");
return true; //Ensure that the tab gets selected
});
);
这是正确加载Ajax文件和所有,但每当我尝试做一些事情,如评估JS中的语句,它似乎被忽略。 有什么方法可以做到这一点,所以一旦文件加载我的函数被调用 - 需要是每个选项卡的不同功能。
编辑如下:
事实上,切换确实减轻了我调用不同功能的问题。 我没在想......
但是,我所追求的是在每个选项卡中都有一个空div用于记录(如果我在没有Firebug的Web环境中)。
我有以下功能:
if (typeof console === 'undefined') {
var console = { };
console.log = function(msg) {
$('#dynamicContent').append(createElement('p', msg));
};
}
应该将消息记录到每个片段中加载的div,但是在加载新选项卡时不会记录任何日志。
我的标签设置如下:
$('#tabs').tabs({
select: function(event, ui) {
log.debug("Loading: ajax/question_" + ui.index + ".html");
},
show: function(event, ui) {
log.debug("Finished Loading: ajax/question_" + ui.index + ".html");
}
});
我不完全你后是什么,但有一个tabsload
事件 ,您可以使用,就像这样:
$(function() {
$('#tabs').tabs().bind('tabsselect', function(event, ui) {
console.log("Loading: ajax/question_" + ui.index + ".html");
return true; //Ensure that the tab gets selected
}).bind('tabsload', function(event, ui) {
switch(ui.index) {
case 0:
//do something for first tab...
break;
case 1:
//do something for second tab...
break;
//etc...
}
});
);
我使用switch
语句来表示“需要为每个选项卡提供不同的功能”,但无论你需要做什么,调用外部函数等,你都可以在这里做。 如果你需要在href
进行切换,你可以使用ui.tab
作为锚元素,无论什么最合适。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.