jQuery .load方法导致页面刷新AJAX

Question

我有一个功能JSP页面,它接受URL参数并使用基于这些参数的信息更新页面上的表.

我有一组不同的选项卡,它们将所述URL paraneters传递给它们所在的页面,然后重新加载并显示这些新数据.

我一直在尝试使用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&amp;productPolicyId=748#a1">Individual</a></li>
    <li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=749#a1">Couple</a></li>
    <li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=750#a1">Family</a></li>
    <li><a href="quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&amp;productPolicyId=751#a1">Single Parent Family</a></li>
</ul>

Answer 1

当用户单击li元素时,您将返回false ,这不会阻止a元素中的li元素触发.您需要覆盖其默认操作以防止它们被触发:

$('ul#coverTabs > li > a').click(function(event) {   
    event.preventDefault(); 
}