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。页面导航（First / Prev / 1/2/3 / Next / Last）就是我正在做的事情。当我第一次到达页面并单击“2”或“3”时，它的行为与我期望的一样。刷新菜单后，我点击任何其他可行的选项，如“3”，它会发布到http://staging1.roomsalive.com/Catalog/Flooring/Hardwood/3而不是执行JQuery调用。我99％肯定这是因为当我加载文档时，我将JQuery单击事件附加到菜单。然而，当它回发时，那些事件就丢失了。我如何重新加盖它们？这是问题吗？

TIA

Answer 1

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

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

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

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

Answer 2

尝试

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

//请删除此行 - 我添加此行以解决最少6个字符的规则。

Answer 3

看起来当页面首次加载时，事件会绑定到元素，但是当您删除这些元素并将其替换为类似元素时......它们是 new 元素没有事件限制。

您可以修改成功和失败函数，以便在$.html()调用更改DOM后将函数绑定到新元素。

JQuery - 停止点击标记

3 个答案: