What keeps a click event from firing when using .on function?
===

//HTML: 

     <table id="requests" class="table table-striped multiselecttable">
        	<tbody>
        		<tr data-uid="209" style="cursor: pointer; ">
        			<td class="span5">Username</td>
        			<td>
        				<a class="btn btn-success"><i class="icon-ok icon-white"></i> Approve</a>
        				<a class="btn btn-inverse"><i class="icon-remove icon-white"></i> Reject</a>
        			</td>
        		</tr>
        	</tbody>
        </table>


//JQUERY:

    if($("#requests").length) {
    	//individual request approve button
    	$("#requests .btn-inverse").click(function(e){
    		//works!
    		$(this).removeClass("btn-inverse").addClass("btn-danger").html("<i class='icon-white icon-remove'></i> Are you sure?");
    	});
    	$("#requests .btn-success").click(function(e){
    		//works!
    		e.stopPropagation();
    	});
    	$("#requests").on('click', '.btn-danger', function(e){
    		alert('why u no trigger (╯°□°）╯︵ ┻━┻');
    		e.stopPropagation();
    	}
    }


When I am clicking on the .btn-danger, nothing is happening at all. The other two functions (with clicks) are working.. There is a lot of other javascript; is there a way I can tell if anything is happening when it gets clicked?