При добавлении кода html не работает событие
 

Необходимо сделать что-то типо расписания
Саму форму сделал, все сформировал
Редактирование записей "на лету" получилось
Добавляю в сетку расписания новые элементы (с помощью всплывающего окна), в принципе работает, но редактирование для вновь добавленных элементов не происходит

Пытался с помощью on, наверно как то не так юзаю(
Еще есть проблема при закрытии окна добавления (#close_btn), вновь вызвать его (.add) не выходит

Подскажите как подправить

$(function (){
	
	var oldVal, newVal, id, cell, edate, couple, staff2, grp, exercise, subject, place, add_td;
	
	$('.edit').focus(function(){
		oldVal = $(this).text();
		id = $(this).data('id');
		cell = $(this).data('cell');
		console.log('edit: ' + oldVal + '|' + id + '|' + cell);
	})
	
	
	$('.add').click(function(){
		$('#add_form').delay(100).fadeIn(100);
		edate = $(this).data('edate');
		couple = $(this).data('couple');
		staff = $(this).data('staff');
		$(this).parent().attr('id', 'cur_td');
		console.log('add(part 1): ' + edate + '|' + couple + '|' + staff);
	})
	
	$('#close_btn').click(function(){
		$('#add_form').delay(50).fadeOut(50);
		$(this).parent().parent().attr('id', '');
	})
	
	$('#save_btn').on("click", "#cur_td", function(){
	//$('#save_btn').click(function(){
		grp = $("input[name='grp']").val();
		exercise = $("input[name='exercise']").val();
		subject = $("input[name='subject']").val();
		place = $("input[name='place']").val();
		//console.log('add(part 2): ' + grp + '|' + exercise + '|' + subject + '|' + place);
		//console.log(add_td);
				$.ajax({
					url: 'index.php',
					type: "POST",
					data: {edate: edate, couple: couple, staff: staff, grp: grp, exercise: exercise, subject: subject, place: place},
					beforeSend: function(){
						$('#loader').fadeIn();
					},
					success: function(res){
						$('#add_form').fadeOut();
						$('#mes-edit').text(res).delay(400).fadeIn(600,function(){
							$('#mes-edit').delay(600).fadeOut();
						});
						add_td ="<div class='edit n_edit' data-id='" + res + "' data-cell='grp' contenteditable='true'>" + grp + "</div><div class='inline'><div class='edit' data-id='' data-cell='exercise' contenteditable='true'>" + exercise + "</div> /<div class='edit' data-id='' data-cell='subject' contenteditable='true'>"  + subject +  "</div></div><div class='edit' data-id='' data-cell='place' contenteditable='true'>" + place + "</div>";		
						$('#cur_td').append(add_td);	
						$(this).parent().parent().attr('id', '');
						$('div.add').remove();	
					},
					error: function(){
						alert('Error!');
					},
					complete: function(){
						$('#loader').delay(400).fadeOut();
					}
				});
		
		return false;
	})
	
	
	$('.edit').keypress(function(e){
		if(e.which == 13){
			newVal = $(this).text();
			console.log(oldVal + ' - ' + newVal + ' - ' + id + ' - ' + cell);
			if(newVal != oldVal) {
				$.ajax({
					url: 'index.php',
					type: "POST",
					data: {new_val: newVal, cell: cell, id: id},
					beforeSend: function(){
						$('#loader').fadeIn();
					},
					success: function(res){
						//console.log(res);
						$('#mes-edit').text(res).delay(400).fadeIn(600,function(){
							$('#mes-edit').delay(600).fadeOut();
						});
					},
					error: function(){
						alert('Error!');
					},
					complete: function(){
						$('#loader').delay(400).fadeOut();
					}
				});
			}
			return false;
		}
	
	})
	
})

$('.edit').focus, $('.edit').keypress - делегировать обработку ближайшему родителю имеющемуся всегда на странице или body (метод .on).

close_btn в коде не видно, где она, но ей обработчик лучше указывать в сценарии добавления окна.

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

$('#close_btn').click(function(){
        $('#add_form').delay(50).fadeOut(50);
        $(this).parent().parent().attr('id', '');
    })

Как может быть добавление к примеру этого обработчика $('.edit').focus... элементам, если они добавляются на страницу динамически? Никак.
Значит нужно делегировать обработку этого события родителю, если эти элементы добавляются в body, то ему. Но судя по коду, добавление происходит в cur_td, то есть он всегда есть на странице, а значит делегировать ему. Это возможно потому, что события всплывают (хотя и не все). То есть:

$('#cur_td').on('keypress', '.edit', function(e){....

Или непосредственно при добавлении элементов на страницу:

$("<div class='edit n_edit' data-id='" + res + "' data-cell='grp' contenteditable='true'>" + grp + "</div><div class='inline'><div class='edit' data-id='' data-cell='exercise' contenteditable='true'>" + exercise + "</div> /<div class='edit' data-id='' data-cell='subject' contenteditable='true'>"  + subject +  "</div></div><div class='edit' data-id='' data-cell='place' contenteditable='true'>" + place + "</div>").appendTo('#cur_td').find('.edit').on(событие, обработчик).... ну и т.д.

Спасибо! помог первый способ!

А что скажите на счет появления только 1 раз всплывающего окна добавления, после нажатия кнопки закрыть вызвать еще раз не получается, приходится обновлять весь документ

$('.add').click(function(){
		$('#add_form').delay(100).fadeIn(100);

		edate = $(this).data('edate');
		couple = $(this).data('couple');
		staff = $(this).data('staff');
		$(this).parent().attr('id', 'cur_td');
		console.log('add(part 1): ' + edate + '|' + couple + '|' + staff);
	})
	
	$('#close_btn').click(function(){
		$('#add_form').delay(50).fadeOut(50);
		$(this).parent().parent().attr('id', '');
	})

И второй будет работать с тем же успехом. Что касается "окна", то проблема та же - видимо изначально кнопка add есть на странице, а при смене контента она также заменяется, а значит уже не будет иметь обработчика. Решение тоже самое, что описано ранее.