我有一个功能齐全的JSP页面,可以接受URL参数,并根据这些参数更新页面上的表格信息。
我有一组不同的选项卡,它们将这些URL参数传递给它们所在的页面,以便重新加载并显示此新数据。
我一直在尝试使用jQuery.load和.ajax方法,以便我可以将这些URL参数传递到服务器上的页面,然后仅通过AJAX提供表格,而不是进行整个页面刷新。
我遇到的问题是有时页面会刷新,我无法弄清楚为什么会发生这种情况。
以下是jQuery代码:
我有一组不同的选项卡,它们将这些URL参数传递给它们所在的页面,以便重新加载并显示此新数据。
我一直在尝试使用jQuery.load和.ajax方法,以便我可以将这些URL参数传递到服务器上的页面,然后仅通过AJAX提供表格,而不是进行整个页面刷新。
我遇到的问题是有时页面会刷新,我无法弄清楚为什么会发生这种情况。
以下是jQuery代码:
$('ul#coverTabs > li').live('click', function() {
// Removes default class applied in HTML and onClick adds 'currentTab' class
$(".currentTab").removeClass("currentTab");
$(this).addClass("currentTab");
// Find href of current tab
var $tabValue = $('ul#coverTabs > li.currentTab > a').attr('href');
// Load new table based on href URL variables
$('#benefit').load($tabValue + ' #' + 'benefit');
/*$.ajax({
cache: false,
dataType: "html",
url: $tabValue,
success: function(data) {
//var $tableWrap = $('#benefit');
//$('.benefitWrap').append($('.benefitWrap'));
//alert($tableWrap);
},
});*/
return false;
});
这是选项卡的HTML代码:
<ul id="coverTabs">
<li class="currentTab"><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=748#a1">Individual</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=749#a1">Couple</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=750#a1">Family</a></li>
<li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=751#a1">Single Parent Family</a></li>
</ul>
return false
不起作用,因为它还将触发stopPropagation()
,从而阻止事件冒泡到li
。 - Chris Van Opstal