Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не работает событие change на поле input (https://javascript.ru/forum/jquery/70480-ne-rabotaet-sobytie-change-na-pole-input.html)

rybachok91 07.09.2017 22:50

Не работает событие change на поле input
 
Вложений: 1
Здравствуйте, уважаемые программисты! Помогите, пожалуйста, новичку:cray: . Я делаю следующее: при клике на блок #name меняю его содержимое на input. И теперь нужно, чтобы, когда в поле будет изменено значение, при нажатии на Enter или уводе фокуса это значение сохранить в переменную, чтобы дальше использовать. Я не могу понять, почему не работает событие, если я пишу его после инструкции с заменой. Не говоря уже о том, как объединить 2 события с помощью on(). Единственное, что получается, это когда событие прописано в самом теге input. Почему так получается с событием? Помогите.....

ksa 08.09.2017 08:24

Копировать текст программы текстом уже моветон? :blink:

Dilettante_Pro 08.09.2017 10:38

rybachok91,
Сколько div с id="name" у вас создается в цикле?
id должен быть уникальным.
То же замечание и по индексам других создаваемых div

Белый шум 08.09.2017 10:39

ksa,
Простой текст в наш век цифровых технологий, когда фотоаппарат есть в каждом телефоне?... :D

rybachok91,
Вы пытаетесь навесить событие на элемент, которого ещё нет. Он появится потом, при клике.

ksa 08.09.2017 11:48

Цитата:

Сообщение от Белый шум
Простой текст в наш век цифровых технологий, когда фотоаппарат есть в каждом телефоне?

От нас наверное уже видео ждут с объяснениями... :blink:

rybachok91 08.09.2017 13:05

Цитата:

Сообщение от ksa (Сообщение 464053)
От нас наверное уже видео ждут с объяснениями... :blink:

Спасибо, что ответили. Вот Вы смеетесь, а мне все так же не понятно. Все когда-то начинали и ошибались. Тогда буду искать видео, где объяснят.

rybachok91 08.09.2017 13:21

Цитата:

Сообщение от Белый шум (Сообщение 464045)
ksa,
Простой текст в наш век цифровых технологий, когда фотоаппарат есть в каждом телефоне?... :D

rybachok91,
Вы пытаетесь навесить событие на элемент, которого ещё нет. Он появится потом, при клике.

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

$("#name").click(function() {
$(this).replaceWith('<input type="text" name="correct_name"
id="cor_name" value="' + get_name(person_data) +'" size="30">');

$("#cor_name").keyup(function(eventObject){
changed_name = $("#cor_name").val();
if (event.keyCode == 13) {
return changed_name;
}
});
$("#cor_name").change(function(){
changed_name = $("#cor_name").val();
return changed_name;
});
});

ksa 08.09.2017 13:32

Цитата:

Сообщение от rybachok91
Давайте я Вас еще больше рассмешу.

Ты не нас смеши... А себе помоги - сделай нормальный тестовый пример и выкладывай его тут. На нем покажут что к чему, если тебе не понятны словесные объяснения...

rybachok91 08.09.2017 13:39


У меня выводится из базы данных одна строка со значениями: имя, возраст, город. Эти значения помещаются в 3 блока: id="name", id="age", id="city". Строка только одна и каждый блок со своим id. Т.е. не будет по 2 имени и т.д. Или неправильно? И уже потом, когда значения поменяются вручную, при уводе фокуса или нажатием Enter, их нужно так же через ajax сохранить в базе.

rybachok91 08.09.2017 13:42

Цитата:

Сообщение от ksa (Сообщение 464069)
Ты не нас смеши... А себе помоги - сделай нормальный тестовый пример и выкладывай его тут. На нем покажут что к чему, если тебе не понятны словесные объяснения...

Чем плох пример?

Nexus 08.09.2017 13:43

Цитата:

Сообщение от rybachok91
Чем плох пример?

HTML'я нет.

ksa 08.09.2017 13:44

Цитата:

Сообщение от rybachok91
Чем плох пример?

Больше вопросов не имею... :(

rybachok91 08.09.2017 13:49

Цитата:

Сообщение от ksa (Сообщение 464074)
Больше вопросов не имею... :(

Почему? Вы скажите. Вот написали выше, что нужен HTML. Все ясно. А про моветон и фотоаппарат, извините. Наверно, со мной что-то не так.

Dilettante_Pro 08.09.2017 13:53

<div id="name">Click me!</div>
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script>
$("#name").click(function() {
    $(this).replaceWith('<input type="text" name="correct_name" id="cor_name" value="33" size="30">');	

    $("#cor_name").keyup(function(){
         changed_name = $(this).val();
         if (event.keyCode == 13) {
              alert(changed_name);
         }
    });
});
</script>

Nexus 08.09.2017 13:53

rybachok91, нужно поменять селектор элемента, на который должны обработчики вешаться.
$('input').on('keydown',function(e){
	var ENTER_KEYCODE=13;
	if(e.keyCode==ENTER_KEYCODE || e.charCode==ENTER_KEYCODE){
		$(this).trigger('blur');
	}
}).blur(function(){
	//Your code
});


Upd. это к посту №9

rybachok91 08.09.2017 13:56

Цитата:

Сообщение от Nexus (Сообщение 464073)
HTML'я нет.

В этой форме ввожу значения для поиска в базе. По этим значениям возвращается ответ, выводится в div id="output_data". Далее значения можно отредактировать и отправить измененные обратно в базу.

<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>

Nexus 08.09.2017 13:57

Dilettante_Pro,
$("#cor_name").keyup(function(*!*eventObject*/!*){
         changed_name = $("#cor_name").val();
         if (*!*event*/!*.keyCode == 13) {
              alert(changed_name);
         }
    });

Nexus 08.09.2017 13:59

Цитата:

Сообщение от rybachok91
По этим значениям возвращается ответ, выводится в div id="output_data". Далее значения можно отредактировать и отправить измененные обратно в базу.

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

Dilettante_Pro 08.09.2017 14:00

Nexus,
Осталось от текста ТС. Почистил.

rybachok91 08.09.2017 14:18

Цитата:

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

Я пока разбираюсь с одним полем, куда выводится значение имени. Сначала в div, потом при клике на div появляется поле input. В нем видно значение из базы, которое можно редактировать. Я его редактирую, далее с помощью функций обработчиков событий chnge или keyup возвращаю. Обработчика два, записаны отдельно, потому что не получается через on(). В alert измененное значение выводится. Проблема в том, что не получается вытащить значение измененного поля input в переменную, чтобы отправить обратно в базу. Первая проблема была проблема с последовательностью событий. Мне так и не понятно, как она разрешилась. События после клика на блок и изменения имени неожиданно заработали, хотя последовательность записи осталась прежней. Вот это не ясно было, почему так. Скажите, может я что-то не так объясняю? Или код нужно придумывать отдельно для примера, а не рабочий прилагать? Я первый раз на форуме пишу:(

rybachok91 08.09.2017 14:20

Цитата:

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

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

Dilettante_Pro 08.09.2017 14:36

rybachok91,
Цитата:

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

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

Nexus 08.09.2017 14:44

<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 08.09.2017 14:50

Цитата:

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

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

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

Цитата:

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

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

rybachok91 08.09.2017 14:57

Цитата:

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

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

rybachok91 08.09.2017 15:00

Цитата:

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

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


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

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

Nexus 08.09.2017 15:07

Цитата:

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

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

rybachok91 08.09.2017 15:34

Спасибо Вам.

Белый шум 09.09.2017 07:29

Цитата:

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

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


Часовой пояс GMT +3, время: 00:40.