[makc9I]

Практически все получилось.
Полная картина выглядит так:

Имеется такой блок:

<div class="order_box" id="56">
			<span class="time">10 : 00 - </span>
			<span class="destination">п. Молочное(5007)</span>
			<div class="seat1 place">Иванов</div>
			<div class="seat2 place">Петров</div>
			<div class="seat3 place free">свободно</div>
			<div class="seat4 place free">свободно</div>
			<a class="approve_btn" href="/index.php?&id=56"> подтвердить </a> 
			<div class="not_approved"> Статус:ожидает подтверждения</div>
		</div>

Визуально выглядит так:


При наведении на любую ячейку с надписью свободно видим следующее:



Клик по ячейке приводит к такому:


Вот код, который занимается обработкой сего чуда:

$(document).ready(function () {
	$(".today .free, .usual .free, .holliday .free")
	.mouseenter(function () {
		$(this).text("бронь")
			   .css({
					"background": "#FAD400",
					"color": "#0000CD",
					"cursor": "pointer"
				})
	}).mouseleave(function () {
		$(this).text("свободно")
			   .css({
					"background": "",
					"color": ""
				})
	}).click(function () {
			var myform = $("<form/>", {
				"action": "http://auto/index.php",
				"method": "POST",
				"id": "add_name_form"
			})
			$("<input/>", {
				"type": "text",
				"name": "name",
				"class": "name_input"
			})
				.appendTo(myform);
			$("<input/>", {
				"type": "submit",
				"value": "ok",
				"id": "name_submit"
			})
				.appendTo(myform);
				
			var cell_class = $(this).attr("class").slice(0,5);
			var order_id = $(this).parent().attr("id");
			
			$("<input/>", {
				"type":"hidden",
				"name": "place",
				"value": cell_class
				
			})
				.appendTo(myform);
				
			$("<input/>", {
				"type":"hidden",
				"name": "order_id",
				"value": order_id
				
			})
				.appendTo(myform);
			
						
			
								
			$(".free").off();
			$(this).html(myform);
			$(this).append("<button> отмена</button>");
			$(this).css ({
					"cursor":"default"
			})
			
			$("button").click (function(){
				$("#add_name_form").remove();
				$(this).remove();
								
			})
		})
})

Во всем этом есть одна брешь:

$(".free").off();

Как только мы вызываем метод off, мы лишаемся всех настроек для нашей ячейки, но это необходимо, чтобы можно было кликнуть в input text для ввода фамилии, и выводы мыши за пределы ячейки не приводили к отмене обработки.

Но, вдруг мы случайно кликнули в ячейку и хотим отменить это действие, для этого я и добавил кнопку "отмена".
Вот ее обработка:

$("button").click (function(){
   $("#add_name_form").remove();
   $(this).remove();
})

Все, что я могу сделать, это удалить созданную ранее форму. Но хочется, чтобы вся обработка положения мышки также вернулась, думал, что для этого достаточно прикрутить назад такое:

$(".today .free, .usual .free, .holliday .free")
	.mouseenter(function () {
		$(this).text("бронь")
			   .css({
					"background": "#FAD400",
					"color": "#0000CD",
					"cursor": "pointer"
				})
	}).mouseleave(function () {
		$(this).text("свободно")
			   .css({
					"background": "",
					"color": ""
				})
	})

Но как оказалось, прикручивать назад надо вообще весь код, но ведь в этом коде присутствует сама обработка нажатия на кнопку "отмена" и происходит рекурсия. Да и в целом не очень разумно дважды вызывать один и тот же код.
Возникли мысли, что надо как-то обойтись без

$(".free").off();

Но при этом как-то блокировать обработку мыши на момент клика по ячейке (бронь), чтобы выход за пределы ячейки не приходили к сбросу отображения формы, и сам клик в input text обрабатывался именно как клик туда(чтобы вводить текст), а не как клик по ячейке (бронь).

Вот возникла проблема, решения пока не нашел.