Не работает событие 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, время: 00:40. |