JQuery - 阻止 anchor 标记点击

Question

我有以下代码:

//------------------------------------------------------//
// When the document is ready, start firing our AJAX    //
//------------------------------------------------------//
$(document).ready(function() {
    $("#navIndex a").click(function() {
        this.blur();
        return false;
    });
    $("#navPrevNext a").click(function() {
        this.blur();
        return false;
    });

    // Bind actions...
    $("#navIndex a").click(function(e) { e.preventDefault; updateNavigation($(this).attr('href')); });
    $("#navPrevNext a").click(function(e) { e.preventDefault; updateNavigation($(this).attr('href')); });
(); });
});

//--------------------------------------------------------------------------//
// METHODS - Get the params from the page and execute a server side call    //
//--------------------------------------------------------------------------//
function updateNavigation(pageIndex) {
    var filters = $("form").serialize();
    var productGroup = $("#valProductGroup").attr('title');
    var productType = $("#valProductType").attr('title');
    var itemsPerPage = $("#ItemsPerPage").val();
    var menuString = $("#Navigation").html();

    // repopulate the paging menu...
    $.ajax({ url: "/Catalog/Ajax/Update/Navigation"
          , type: 'GET'
          , dataType: 'HTML'
          , data: { productGroup: productGroup, productType: productType, itemsPerPage: itemsPerPage, pageIndex: pageIndex, filters: filters }
          , success: function(results) { $("#Navigation").html(results) }
          , failure: function(results) { $("#Navigation").html(oldMenuString) }
});

    // stop event bubbling... (this is not working as expected?)
    return false;
}

该页面位于http://staging1.roomsalive.com/Catalog/Flooring/Hardwood 。页面导航(第一个/上一个/1/2/3/下一个/最后一个)是我正在研究的。当我第一次进入该页面并单击“2”或“3”时，它的行为符合我的预期。刷新菜单后，我单击任何其他可行的选项，例如“3”，它会发布到 http://staging1.roomsalive.com/Catalog/Flooring/Hardwood/3而不是执行 JQuery 调用。我 99% 确定这是因为当我加载文档时，我将 JQuery 单击事件附加到菜单。然而，当它发回时，这些事件就会丢失。我该如何重新连接它们？这是问题所在吗？

TIA

Answer 1

我可以想到两个原因，也许两个都需要解决。如果您在更新导航时使用附加的点击处理程序替换元素，则需要重新应用处理程序或使用实时绑定(bind)，该实时绑定(bind)会自动将处理程序绑定(bind)到与选择器匹配的任何当前或将来的元素。

$("#navIndex a").live('click', function() {
    this.blur();
    return false;
});

其次，当您在调用 AJAX 的方法中返回 false 时，您不会将该值传播回调用链。确保您的单击函数返回 updateNavigation 方法的结果。或者直接返回 false。

    $("#navIndex a").live('click', function(e) { e.preventDefault; return updateNavigation($(this).attr('href')); });