Hi all,

I am trying to generate and load a table dynamically into a container div as follows -

Code:
	loadTable = function(data){
		var table_str = '';
		for(var i=0;i<data.matches.length;i++){
			table_str += '<table border="0" cellspacing="0" cellpadding="0" class="mtch_table" id="abc"><tr><th colspan="2" scope="col"><div class="left_align upcase game-mins"></div></th><th><div class="right_align"><a href="#"></a></div></th></tr><tr><td>'+data.matches[i].awteam.name+'</td><td><div class="right_align"></div></td></tr><tr><td>'+data.matches[i].hmteam.name+'</td><td><div class="right_align"></div></td></tr></table>';
			table_str += '<hr>';
		}
		$('.table_container').html(table_str);
	};
	$('.mtch_table').click(function(){
		console.log($(this));
	});

and the HTML -
Code:
			<div class="table_container">
				MATCHES
			</div>
jQuery's click event is not getting registered on the table mtch_table as shown in the above code. However, it is working fine if I use the enclosing div table_container instead of the table mtch_table...

What could be the reason for this? Is there any way to register click on the table mtch_table?

Thanks,
Anujit