JQuery - stop anchor tag on click
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 is located at http://staging1.roomsalive.com/Catalog/Flooring/Hardwood . Page navigation (First / Prev / 1/2/3 / Next / Last) is what I am working on. When I first go to a page and press "2" or "3", it behaves as I expect. After updating the menu, I then click on any of the other viable options like "3" and submit to http://staging1.roomsalive.com/Catalog/Flooring/Hardwood/3 instead of making the JQuery call. I'm 99% sure this is due to the fact that when I load the document, I attach JQuery click events to the menu. However, when he returns, these events are lost. How do I re-bind them? This is problem?
TIA
a source to share
I can think of two reasons for this, perhaps both should be addressed. If you are replacing items with click handlers attached when the navigation is updated, you will need to reapply the handlers or use a 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, as long as you return false in the method that calls AJAX, you are not propagating that value to the fallback call chain. Make sure the click function returns the result of the updateNavigation method. Or just return false.
$("#navIndex a").live('click', function(e) { e.preventDefault; return updateNavigation($(this).attr('href')); });
a source to share
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;
});
// remove this line - I add this to bypass the minimum 6 characters rule.
a source to share
It looks like when the page is first loaded the events are bound to the elements, but when you remove those elements and replace them with similar ones ... they are new elements that have no associated events.
you can change success and failure functions to bind functions to new elements after changing the DOM by calling $.html()
.
a source to share