很抱歉以下冗长的问题。很长,因为我已经包含了调试问题的所有发现。
我对这里发生的事情感到困惑,我花了一些时间尝试调试它,但似乎无法弄清楚问题是什么:
我有 2 个在和上运行的函数,这些函数page load
的代码可以在这个问题的末尾看到。 getTabMenu()
getTabFrame()
这些都可以正常工作page load
。
但是,在 之后page load
,如果我再次运行这些函数ajax style
(不刷新浏览器),即通过click event
在数据库中插入一条记录之后,这意味着上面的函数将获得一些额外的html
数据JSON
。由于某种原因,当单击新创建的选项卡时,它会继续打开第一个选项卡页面内容,而不是选项卡内容,即使所有 id 似乎都已正确分配,它也应该打开。只要我refresh
通过浏览器刷新按钮打开页面,它就会开始正常工作......
以下是我在调试过程中捕获的一些输出html
:json
在页面加载时:
getTabFrame()
生成:
[
{
"key": 4,
"value": "Internal"
},
{
"key": 5,
"value": "External"
},
{
"key": 6,
"value": "Reporting"
},
{
"key": 7,
"value": "General interest"
}
]
getTabMenu()
生成:
<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>
发生这种情况时一切看起来都很好,page load
并且一切正常。
在数据库中插入新行并在不刷新浏览器的情况下重新运行上述功能后,我得到:
getTabFrame()
生成:
[
{
"key": 4,
"value": "Internal"
},
{
"key": 5,
"value": "External"
},
{
"key": 6,
"value": "Reporting"
},
{
"key": 7,
"value": "General interest"
},
{
"key": 38,
"value": "Other"
}
]
GetTabMenu()
生成:
<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>
<div class="item" id="tab4">Other</div>
一切看起来都很好,请注意html
和json
片段中的额外数据。
现在的问题是,当我现在click
打开时tab4
,它会将密钥发送4
到get_tab_content.aspx
via url 查询字符串,它应该发送密钥38
。因此,因为它发送了密钥4
,所以它得到的页面就像我单击时tab0
发送的密钥一样4
。单击任何较旧的选项卡,返回正确的页面,只是新创建的选项卡导致了问题。
所以现在,如果我刷新浏览器,我会得到以下信息page load
:
getTabFrame()
生成:
[
{
"key": 4,
"value": "Internal"
},
{
"key": 5,
"value": "External"
},
{
"key": 6,
"value": "Reporting"
},
{
"key": 7,
"value": "General interest"
},
{
"key": 38,
"value": "Other"
}
]
getTabMenu()
生成:
<div class="item" id="tab0">Internal</div>
<div class="item" id="tab1">External</div>
<div class="item" id="tab2">Reporting</div>
<div class="item" id="tab3">General interest</div>
<div class="item" id="tab4">Other</div>
请注意,这看起来与单击按钮而不刷新浏览器时返回的输出完全相同,这是正确的。
现在,如果我点击tab4
,它会发送出去38
,这是正确的,并且哪个实习生返回了正确的页面内容......
所以基本上,重新运行这些函数会生成正确的 html 和 json,但是在页面加载时不存在的新创建的数据在刷新浏览器之前无法正常工作。
为什么会这样?
这是getTabMenu()
功能:
function getTabMenu() {
$.ajax({
url: 'get_tab_menu.aspx?rand=' + Math.random(),
type: 'GET',
error: function(xhr, status, error)
{
console.log(status);
console.log(xhr.responseText);
},
success: function(results)
{
$("#div1").empty().append(results);
}
});
}
这是getTabFrame()
功能:
function getTabFrame() {
$.ajax({
url: 'get_tab_frame.aspx?rand=' + Math.random(),
type: 'GET',
dataType: 'json',
error: function(xhr, status, error) {
alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
},
success: function(results) {
var tabs = $("#tabs");
$.each(results, function(index, item) {
tabs.tabs("add","get_tab_content.aspx?tab=" + item.key, item.value)
.find('>ul>li:last')
.attr('id', 'tab_' + item.key);
alert(item.key);
// new click events
$("#tab" + index + "").live('click', function() { $("#tabs").tabs( "select" , index ); });
});
getTabMenu();
}
});
}