Не работает событие change на поле input

[rybachok91]

Обработчики на полученные поля накладываются после их размещения на странице?

В <div id="output_data"> помещаются еще три, в которых значения из базы. Они добавляются с помощью скрипта.

[Dilettante_Pro]

rybachok91,

событий chnge или keyup возвращаю

Куда возвращаете?
Обработчики событий никуда ничего не возвращают. В них можно что-то менять - например, глобальную переменную.
Но по какому событию ее нужно будет отправлять обратно в базу данных?
Может, отправить ее из обработчика - отправку записать вместо алерта по примеру пост 14.

[Nexus]

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main">
	<h2>ИНФОРМАЦИЯ О ПОЛЬЗОВАТЕЛЯХ</h2>
	<p id="input_text">Введите имя и возраст пользователя и щелкните по кнопке "Найти"</p>
	<div id="output_data"></div>
	<form action="add_new_user.php" method="post" id="input_data">
		<label for="user_name">Имя:</label>
		<input type="text" name="user_name" value="" size="30"><br/>
		<label for="user_age">Возраст:</label>
		<input type="text" name="user_age" value="" size="30"><br/>
		<input type="button" id="find" value="Найти">
	</form>
</div>
<script>
	$(function(){
		$('#find').click(function(){
			var $cont=$('#output_data').empty();
			$('<div></div>').attr({
				'data-type':'text',
				'data-name':'name',
				'data-placeholder':'Новое имя'
			}).text('Имя').appendTo($cont).clone().attr({
				'data-type':'number',
				'data-name':'age',
				'data-placeholder':'Возраст'
			}).text('Возраст').appendTo($cont);
			$cont.find('>div').click(function(){
				var $t=$(this);
				if($t.find('*').length>0)
					return;
					
				$('<input/>').attr({
					type:$t.data('type'),
					name:$t.data('name'),
					placeholder:$t.data('placeholder'),
					'data-original-value':$t.text()
				}).val($t.text()).appendTo($t.empty()).on('keydown',function(e){
					var ENTER_KEYCODE=13;
					if(!!e.keyCode && e.keyCode==ENTER_KEYCODE || !!e.charCode && e.charCode==ENTER_KEYCODE){
						e.stopPropagation();
						$(this).trigger('blur');
					}
				}).blur(function(){
					var $t=$(this);
					if($t.val().trim().length<=0 || $t.val().trim()==$t.data('original-value'))
						return;
					
					send_request($t.attr('name'),$t.val());
					$t.parent().html($t.data('original-value'));
				});
			});
		});
	});
	
	function send_request(field,new_value){
		//Ajax request
		alert(field+': '+new_value);
	}
</script>

[ksa]

Скажите, может я что-то не так объясняю?

Объяснения особо не нужны...
Достаточно сделать тестовый пример на котором проявляется проблема. Тогда на этом примере можно показать пути решения.

Вот Nexus наглядно показывает такой пример.

Или код нужно придумывать отдельно для примера, а не рабочий прилагать?

Пример должен быть максимально прост.
Но можешь предложить деньги в разделе "Работа" и возможно найдется желающий помочь тебе прямо в твоем коде.

[rybachok91]

rybachok91,
Куда возвращаете?
Обработчики событий никуда ничего не возвращают. В них можно что-то менять - например, глобальную переменную.
Но по какому событию ее нужно будет отправлять обратно в базу данных?
Может, отправить ее из обработчика - отправку записать вместо алерта по примеру пост 14.

Вот это было не понятно: обработчики не возвращают. Нужно отправлять данные, когда изменили имя: или после увода фокуса, или после нажатия Enter. У меня не получилось объединить два события через on(), поэтому пришла идея вернуть измененное в поле значение из обработчика, а потом уже его использовать, чтобы отправить. А можно из двух разных обработчиков отправлять данные? Получается, будет одинаковый код 2 раза? Это тоже моветон? А можно создать отдельно функцию-обработчик и использовать ее в двух событиях?

[rybachok91]

Объяснения особо не нужны...
Достаточно сделать тестовый пример на котором проявляется проблема. Тогда на этом примере можно показать пути решения.

Вот Nexus наглядно показывает такой пример.


Пример должен быть максимально прост.
Но можешь предложить деньги в разделе "Работа" и возможно найдется желающий помочь тебе прямо в твоем коде.

Спасибо, теперь все понятно. Моя проблема в том, что в примерах в конце alert и все работает. У меня тоже 2 события с alertom сработали. Ступор был в том, что дальше. Пробелов в знаниях много, не спорю. Только начинаю. И что обработчики ничего не возвращают, было упущено.

[Nexus]

Ступор был в том, что дальше

Дальше алерт заменяешь созданием асинхронного запроса.
http://api.jquery.com/jquery.ajax/
http://api.jquery.com/jQuery.post/
http://api.jquery.com/jQuery.get/

[rybachok91]

Спасибо Вам.

[Белый шум]

Мне не понятно: в первом виде на скриншоте следом за событием click написано change и вывод alert для проверки, если оно сработало. Во втором виде последовательность та же и все заработало. Ну и конечно да, у меня не получилось объединить два события через on() это вас повеселит.

Во втором примере у вас событие change находится внутри функции события click, т.е. обработчик навешивается _после_ появления элемента на странице.