Salve a tutti, ho due funzioni ajax, una con $(document).ready(function() {..... e l'altra a parte nello stesso file.js. Funzionano benissimo. Quando lancio però la seconda (dofilter), la prima non funziona più. Perché?

Riporto di seguito l'intero codice, se qualcuno sa darmi qualche consiglio.
codice:
		$(document).ready(function() {
		  $(".color-item").click(function() {
			  
			$(this).prevAll().remove('.color-checked');
			$(this).nextAll().remove('.color-checked');
			var myTitle = $(this).attr('title');
			$(this).before('<div class="color-checked" title="' + myTitle + '"></div>');
			$(this).parent().prevAll().remove('.fast-shipping');
			
			var product_id = $(this).parent().parent('li').attr('id');
			var option_id = $(this).attr('class').replace('color-item ','');
			
			$.ajax({	
				type: "POST",
				url: "ajax_index.php?action=change_thumb",
				data: {product_id:product_id, option_id:option_id},
				cache: false,
				success: function(html){
					$('#' + product_id).find('.product-thumb').replaceWith(html);
				}
			});
		
		  });
		});

		function dofilter(action, sortorder){
			var data = $("#filter").serialize();
			var url = "ajax_index.php?action=" + action + "&sort_order=" + sortorder + "&" + data;
			$('#loading').fadeIn('fast');
			$(".products").load(url, function() {
				$('#loading').fadeOut('fast');
			});
		}