problem after recreate

It seems like I can't find a proper way to destroy Datatable. When I click on it, I get so much onclick events as how many times Datatable is recreated. Put this in /examples/data_sources/ajax.html:

var oTable = '';
var columns = [	{ "sTitle": "Rendering engine", "sWidth": "20%", "sClass": "center" },
			    { "sTitle": "Browser", "sWidth": "25%" },
			    { "sTitle": "Platform(s)", "sWidth": "25%", "sClass": "center" },
			    { "sTitle": "Engine version", "sWidth": "15%", "sClass": "center" },
			    { "sTitle": "CSS grade", "sWidth": "15%", "sClass": "center" }
];

function tableEmpty() {
	oTable.fnDestroy();
	$("#example").empty();
}

function tableCreate() {
			
	oTable = $('#example').dataTable( {
		"bProcessing": true,
		"aoColumns": columns,
		"sAjaxSource": '../ajax/sources/arrays.txt'
	} );

	$(document).on("click", "#example tbody tr", function(e){
		cell_text = $("td:eq(0)", this).text();
		alert("cell_text:"+cell_text);
	});
}

<div id="container">
	<div class="full_width big">
		DataTables AJAX source example
	</div>
			
	<h1>Preamble</h1>
	<p><a style="cursor: pointer;" onclick = "tableEmpty()">Table empty</a></p>
	<p><a style="cursor: pointer;" onclick = "tableCreate()">Table create</a></p>
			
	<h1>Live example</h1>
	<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
</table>
	</div>

</div>

I want a single alert every time. How can I achieve that?