jquery .load() works - but DOM doesn't see the new content

[michaellunsford]

I'm use jquery's .load() in the menu to dynamically replace some content without having to completely reload the page.

 

When I do this, the content loads just fine. I can click as many different menu items as I'd like and the content gets replaced just fine. The problem is when I try to click an element that jquery is supposed to do something with, it acts as if jquery doesn't know it's there, and it falls-back to the html.

 

// a click on a menu item dynamically loads the right-side content.
$("#left_menu a").click(function () {
	var jumpval = this.href;
	var bodyFilter=/[^a-zA-Z]/;
	$('#right_content').load(jumpval+' #right_content');
	newbody=jumpval.substring(31,jumpval.length-5);
	newbody=newbody.replace(bodyFilter,'');
	newbody=newbody.replace(bodyFilter,'');
	$('body').attr('id','body'+newbody);
	return(false);
});
// clicking the "add to cart" button hits a php file that adds the item to the session.
// It returns the number of items in the cart, and a small red dot gets the number. 
// Works when page is loaded by browser - but not when replaced with jquery.
$("#fooditem .formbuttons").click(function() {
	$('#items-in-cart').load('elements/add-item.php?id='+$("#foodid").val());
	return(false);
});

[michaellunsford]

Got it! I needed to use "live('click', function() {" instead of plain old "click()"

 

   $("#fooditem .formbuttons").live('click',function() { ...