JQuery - Anker-Tag aus, klicken durch

Question

stoppe ich den folgenden Code haben:

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

Die Seite kann bei http://staging1.roomsalive.com/Catalog/Flooring/Hardwood finden. Die Seitennavigation (Erste/Vorherige/1/2/3/Nächste/Letzte) ist woran ich gerade arbeite. Wenn ich zum ersten Mal auf die Seite komme und auf "2" oder "3" klicke, verhält es sich so, wie ich es erwarte. Sobald das Menü aktualisiert ist, klicke ich dann auf eine der anderen realisierbaren Optionen, wie "3", und sendet es an http://staging1.roomsalive.com/Catalog/Flooring/Hardwood/3, anstatt den JQuery-Aufruf auszuführen. Ich bin mir zu 99% sicher, dass dies daran liegt, dass ich, wenn ich das Dokument lade, die JQuery click-Ereignisse an das Menü anschließe. Wenn es jedoch zurückgibt, sind diese Ereignisse verloren. Wie rette ich sie? Ist das das Problem?

TIA

Answer 1

Ich kann mir zwei Gründe dafür vorstellen, vielleicht müssen beide gelöst werden. Wenn Sie beim Aktualisieren der Navigation die Elemente durch die angehängten Click-Handler ersetzen, müssen Sie entweder die Handler erneut anwenden oder die Live-Bindung verwenden, die den Handler automatisch an ein beliebiges aktuelles oder zukünftiges Element bindet, das mit dem Selektor übereinstimmt.

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

Zweitens, während Sie in der Methode false zurückgeben, die die AJAX-Aufrufe, die Sie nicht diesen Wert wieder auf die Verbindungskette ausbreiten. Stellen Sie sicher, dass Ihre Klickfunktion das Ergebnis der updateNavigation-Methode zurückgibt. Oder gib einfach falsch zurück.

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

Answer 2

Versuchen

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

// Bitte entfernen Sie diese Zeile - ich bin das Hinzufügen um das Minimum 6 Zeichen Regel zu bekommen.

Answer 3

Wenn die Seite zum ersten Mal geladen wird, werden die Ereignisse an die Elemente gebunden, aber wenn Sie diese Elemente löschen und durch ähnliche ersetzen ... sind das neue Elemente, für die keine Ereignisse gebunden sind.

Sie können die Erfolgs- und Fehlerfunktionen ändern, um die Funktionen an die neuen Elemente zu binden, nachdem das DOM durch den Aufruf $.html() geändert wurde.