JQuery - stop anchor tag from clicking through

Question

I have the following code:

//------------------------------------------------------//
// 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;
}

The page can be found at http://staging1.roomsalive.com/Catalog/Flooring/Hardwood. The page navigation (First/Prev/1/2/3/Next/Last) is what I am working on. When I first get to the page and click on "2" or "3" it behaves the way I expect. Once the menu is refreshed I then click on any of the other viable options, like "3", and it posts to http://staging1.roomsalive.com/Catalog/Flooring/Hardwood/3 instead of executing the JQuery call. I am 99% sure this is because when I load the document I attach the JQuery click events to the menu. Yet, when it posts back, those events are lost. How do I reattch them? Is that the problem?

TIA

Answer 1

Try

$("#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; 
});

Answer 2

It looks like when the page loads for the first time, the events get bound to the elements but when you delete those elements and replace them with similar ones... they are new elements that have no events bound.

you could modify the success and failure functions to bind the functions to the new elements after the DOM is changed by the $.html() call.

Answer 3

I can think of two reasons for this, perhaps both need to be solved. If you are replacing the elements with the click handlers attached when you update the navigation you'll either need to reapply the handlers or use the live binding which automatically binds the handler to any element, current or future, that matches the selector.

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

Second, while you are returning false in the method that calls the AJAX, you don't propagate that value back up the call chain. Make sure that your click function returns the result of the updateNavigation method. Or simply return false.

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