Не работает событие change на поле input
Вложений: 1
Здравствуйте, уважаемые программисты! Помогите, пожалуйста, новичку:cray: . Я делаю следующее: при клике на блок #name меняю его содержимое на input. И теперь нужно, чтобы, когда в поле будет изменено значение, при нажатии на Enter или уводе фокуса это значение сохранить в переменную, чтобы дальше использовать. Я не могу понять, почему не работает событие, если я пишу его после инструкции с заменой. Не говоря уже о том, как объединить 2 события с помощью on(). Единственное, что получается, это когда событие прописано в самом теге input. Почему так получается с событием? Помогите.....
|
Копировать текст программы текстом уже моветон? :blink:
|
rybachok91,
Сколько div с id="name" у вас создается в цикле? id должен быть уникальным. То же замечание и по индексам других создаваемых div |
ksa,
Простой текст в наш век цифровых технологий, когда фотоаппарат есть в каждом телефоне?... :D rybachok91, Вы пытаетесь навесить событие на элемент, которого ещё нет. Он появится потом, при клике. |
Цитата:
|
Цитата:
|
Цитата:
$("#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; }); }); |
Цитата:
|
У меня выводится из базы данных одна строка со значениями: имя, возраст, город. Эти значения помещаются в 3 блока: id="name", id="age", id="city". Строка только одна и каждый блок со своим id. Т.е. не будет по 2 имени и т.д. Или неправильно? И уже потом, когда значения поменяются вручную, при уводе фокуса или нажатием Enter, их нужно так же через ajax сохранить в базе. |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
<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>
|
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 |
Цитата:
<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> |
Dilettante_Pro,
$("#cor_name").keyup(function(*!*eventObject*/!*){
changed_name = $("#cor_name").val();
if (*!*event*/!*.keyCode == 13) {
alert(changed_name);
}
});
|
Цитата:
|
Nexus,
Осталось от текста ТС. Почистил. |
Цитата:
|
Цитата:
|
rybachok91,
Цитата:
Обработчики событий никуда ничего не возвращают. В них можно что-то менять - например, глобальную переменную. Но по какому событию ее нужно будет отправлять обратно в базу данных? Может, отправить ее из обработчика - отправку записать вместо алерта по примеру пост 14. |
<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>
|
Цитата:
Достаточно сделать тестовый пример на котором проявляется проблема. Тогда на этом примере можно показать пути решения. ;) Вот Nexus наглядно показывает такой пример. Цитата:
Но можешь предложить деньги в разделе "Работа" и возможно найдется желающий помочь тебе прямо в твоем коде. |
Цитата:
|
Цитата:
|
Цитата:
http://api.jquery.com/jquery.ajax/ http://api.jquery.com/jQuery.post/ http://api.jquery.com/jQuery.get/ |
Спасибо Вам.
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:19. |