[bes]

потому что ты каждым кликом вешаешь дополнительный обработчик на каждую кнопку

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

<button class="but">click</button>
<button class="but2">click after</button>
<script>
$(function () {
	var n = 0;
	$(".but").click(function () {
		n++;
		$(".but2").click(function () {
			console.log(n);
		});
	});
});
</script>

а вот ответ на вопрос - зачем такие навороты

<input type="button" value="new" id="new" />
<ul class="test">
	<li id="l1" data-id="1">1 <input type="submit" value="del" class="del" data-id="1" id="del1" /></li>
	<li id="l2" data-id="2">2 <input type="submit" value="del" class="del" data-id="2" id="del2" /></li>
</ul>
<input type="text" value="2" id="col" />
<script>
$(function() { 	
	//$(".del").click(function(){
	*!*$(".test").on("click", ".del", function(){*/!*
	if (confirm('Вы уверены, что хотите удалить?')) {
		$("#l"+$(this).attr("data-id")).hide();
		} else {}
	});
	
	$("#new").click(function(){ 
			$.ajax({  
				type: "POST",  
				data: "test="+$("#col").val(),
				url: "test.php",  
				success: function(test){	
					$("#col").val(test.id);
					$(".test").append("<li id='l"+test.id+"' data-id='"+test.id+"'>"+test.id+" <input type='submit' value='del' class='del' data-id="+test.id+" id='del"+test.id+"' /></li>"); 	
					
				/*$(".del").click(function(){
				if (confirm('Вы уверены, что хотите удалить?')) {
					$("#l"+$(this).attr("data-id")).hide();
					} else {}
				});*/
								
				}  					
			});		
	});
	
	
});
</script>