jQuery-selectare celula din tabel prin click

[dacian]

Vreau sa selectez o celula dintr-un tabel cu jQuery.
De asemenea folosesc Bootstrap 4 beta.
HTML

<form action="">
    <div class="form-group">
      <label for="tr_number" class="col-form-label">Randuri</label>
      <input type="text" class="form-control" name="insert_tr" id="tr_number" style="width: 30%;">
      <label for="td_number" class="col-form-label">Coloane</label>
      <input type="text" class="form-control" name="insert_td" id="td_number" style="width: 30%;">
    </div>
  </form>
  <button type="button" class="btn btn-primary btn-md" id="generate_btn" style="margin-left: 15px;">Generate</button>

jQuery

$(document).ready(function(){
		$("#generate_btn").click(function(){
		var tr_number=$("#tr_number").val();
		tr_number=Number(tr_number);
		var td_number=$("#td_number").val();
		td_number=Number(td_number);
		console.log(tr_number + " " + td_number );
		var new_table=document.createElement("table");
		new_table.className="table table-bordered";
		new_table.style.width=40 + "%";
		var new_tr;
		var new_td;
		for(var i=1;i<=tr_number;i++) {
			new_tr=document.createElement("tr");
			for(var j=1;j<=td_number;j++) {
				new_td=document.createElement("td");
				new_td.style.border="1px black solid";
				new_tr.appendChild(new_td);
				new_td.className="table_cell";
			}
			new_table.appendChild(new_tr);
		}

		document.body.appendChild(new_table);

	});
	$(".table_cell").click(function(){
		$(this).css("background-color","red");
	});
});

Ce face functia?Cand este apasat butonul sunt preluate valorile din cele 2 input-uri si se face un tabel cu x tr si y td,y td pentru fiecare tr.Fiecare td primeste o clasa si un border(pt ca table-bordered din bootstrap e cam gri-alb si nu prea se vede daca tabelul e gol).

Incerc sa selectez o celula prin click dar nu merge.Cum as putea rezolva?

Am incercat sa caut ajutor pe stackoverflow dar m-am saturat cand tot adaugam comentariu dupa fiecare rand si tot imi zicea ca nu detaliez destul de mult.

[iamntz (Ionuț Staicu)]

Problema ta e aici: $(".table_cell").click(function(){. Tu faci bind la click doar pe elementele existente în acel moment în DOM. Toate elementele noi nu mai au nici un event de click pe ele.

Ca să funcționeze, ai nevoie să folosești event delegation (sună mai complicat decât este). Practic, faci lucrurile să se întâmple invers: faci bind pe document și la event verifici dacă elementul respectiv e ăla de care ai tu nevoie:

$(document).on('click', '.table_cell', function(){ ...}