Я пытаюсь сделать функцию, которая будет выполняться при изменении значения text input field. Значение поля изменяется при щелчке по ячейке таблицы, а не на keyup или вставке. Я пробовал это следующим образом:
$("#kat").change(function(){
alert("Hello");
});
И у меня есть текстовое поле:
<input type="text" id="kat" value="0"/>
но он не работает. Любая помощь?
Это из комментария на странице документации jQuery:
В более старых браузерах, предшествующих HTML5, "keyup" определенно то, что вы ищете.
В HTML5 есть новое событие "input", которое ведет себя точно так же, как вы, кажется, думаете, что "изменение" должно было вести себя - в том, что он срабатывает, как только нажата клавиша для ввода информации в форму.
.$( 'элемент') связать ( 'ввод', функция);
Мне кажется, что вы обновляете значение текстового поля в javascript. Событие onchange будет срабатывать только при вводе данных и выводе из текстового поля.
Одним из способов является запуск события изменения текстового поля при изменении значения текстового поля из script. См. Ниже,
$("#kat").change(function(){
alert("Hello");
});
$('<tab_cell>').click (function () {
$('#kat')
.val($(this).text()) //updating the value of the textbox
.change(); //trigger change event.
});
Эта техника работает для меня:
$('#myInputFieldId').bind('input',function(){
alert("Hello");
});
Обратите внимание, что в соответствии с этот документ JQuery рекомендуется "on", а не связываться в более новых версиях.
Документация jQuery говорит об этом: "Это также отображается [результат выполнения обработчика], если вы меняете текст в поле и затем нажмите" прочь ". Если поле теряет фокус без изменения содержимого, однако событие не запускается.".
Попробуйте выполнить события keyup и keydown, например:
$("#kat").keydown(function(){
alert("Hello");
});
Это сработало для меня
var change_temp = "";
$('#url_key').bind('keydown keyup',function(e){
if(e.type == "keydown"){
change_temp = $(this).val();
return;
}
if($(this).val() != change_temp){
// add the code to on change here
}
});
function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search.php",
data: { query: query_value },
cache: false,
success: function(html){
//alert(html);
$("ul#results").html(html);
}
});
}return false;
}
$("input#search").live("keyup", function(e) {
clearTimeout($.data(this, 'timer'));
var search_string = $(this).val();
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
and the html
<input id="search" style="height:36px; font-size:13px;" type="text" class="form-control" placeholder="Enter Mobile Number or Email" value="<?php echo stripcslashes($_REQUEST["string"]); ?>" name="string" />
<h4 id="results-text">Showing results for: <b id="search-string">Array</b></h4>
<ul id="results"></ul>
Недавно я задавался вопросом, почему мой код не работает, тогда я понял, мне нужно настроить обработчики событий, как только будет загружен документ, иначе, когда браузер загрузит код по очереди, он загружает JavaScript, но он еще не имеет элемента для назначения обработчику события. с вашим примером, это должно быть примерно так:
$(document).ready(function(){
$("#kat").change(function(){
alert("Hello");
});
});
Это работает для меня. Может быть проблема с браузером, как упоминалось, или, может быть, jQuery не зарегистрирован должным образом, или, возможно, реальная проблема сложнее (вы сделали более простую версию, чтобы спросить об этом). PS - нужно было щелкнуть по текстовому полю, чтобы он загорелся.
Это работает для меня во всех браузерах и JQuery <= v1.10
$('#kat').on('keyup', function () {
alert("Hello");
});
или, как вам кажется,
$('#kat').on('click', function () {
alert("Hello");
});
Событие изменения поля ввода текстового поля срабатывает, как и ожидалось, событие jQuery.Change работает корректно только на поддерживаемых html5 браузерах.
Попробуйте это,
$('#kat').on('input',function(e){
alert('Hello')
});