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

Question

我有一个功能齐全的JSP页面，可以接受URL参数，并根据这些参数更新页面上的表格信息。

我有一组不同的选项卡，它们将这些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&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>

- RyanP13

Answer 1

当用户单击

元素时，您返回false，这不会阻止

元素内的元素触发。您需要覆盖它们的默认操作以防止它们触发：

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

- Chris Van Opstal

---

在<a>元素的事件处理程序中返回false确实可以阻止导航，就像preventDefault()一样。我同意preventDefault()更可取，但我不认为这是他的问题。 - Dave Ward

我最初也有同样的想法，但在这种情况下return false不起作用，因为它还将触发stopPropagation()，从而阻止事件冒泡到li。 - Chris Van Opstal

Answer 2

在点击处理程序中，您应该防止默认操作（导航到链接URL）：

<script>
$("a").click(function(event) {
  event.preventDefault();
  // your actions
});
</script>

在您的代码中，没有防止默认操作，因此当用户单击链接时，浏览器会开始导航到HREF URL。

- PanJanek