У меня есть этот рабочий код:
Fiddle: http://jsfiddle.net/r4emt/12/
Прямо сейчас, прежде чем вводить автозаполнение JQuery UI, кнопка читает "Hello". Вы можете ввести "элемент" в автозаполнение JQuery UI, и вы заметите, что кнопка теперь говорит "Мир". Нажмите кнопку "Мир", чтобы поместить элемент в список. Если вы снова наберете элемент, вы можете выбрать его и нажать кнопку "Заменить" на элементе, который уже есть в списке. Однако, как только вы это сделаете, кнопка все еще говорит "мир", но она должна сказать "привет" , потому что в поле ввода ничего нет. Если вы нажмете в поле ввода, а затем нажмете стрелку "Удалить" или "Назад", она вернется к "привет" , но ничего не удастся удалить или перейти влево. Я думаю, что это связано с этой частью кода:
$('#inputWrapper').on('keyup', '#tags', function() {
if($(this).val() == '') {
$('button.addButton').text('Hello');
} else {
$('button.addButton').text('World');
}
});
В частности, часть "keyup". Поэтому мой вопрос заключается в том, как я могу исправить это, так что всякий раз, когда поле ввода пуст, кнопка всегда читает "привет" , а когда есть вход в поле, кнопка читает "мир"? Спасибо!
Здесь - рабочая скрипка. Сделаны следующие изменения:
$('#tags').keyup( function() {
if($(this).val() == '') {
$('button.addButton').text('Hello');
} else {
$('button.addButton').text('World');
}
});
и в конце вашей кнопки нажмите:
$('#tags').val('');
$('#tags').keyup();
Я знаю, что это длинный мертвый поток, но мне нужно было добавить это, потому что я только что потратил 2 дня на отслеживание утечки памяти (вызванный мной с использованием кода с этой страницы).
ВАЖНО: Не используйте jQuerys text() для элементов кнопок!
Функция создает что-то в DOM, которое нельзя удалить пустым(). Если вы затем вызовете функцию несколько раз в течение длительного периода, большое количество мусора будет плюхнуто в ваш DOM, в результате чего материал сломается.
(Не могу найти, где именно упоминается в документации, но где-то там, я должен бежать за своим поездом сейчас)...
Не могли бы вы просто вернуть текст в Hello после его щелчка? Добавьте это в нижнюю часть кнопки:
$(this).text('Hello');
$('#inputWrapper').on('keyup', '#tags', function() {
if($(this).val() == "") {
$('button.addButton').html('Hello1');
} else {
$('button.addButton').html('World');
}
});
Поместите условие, подобное этому
if($.trim($(this).val()) == '')
удалить ненужные пробелы. Кроме того, вы должны изменить текст кнопки на "Hello" в обработчике события click
Добавьте это в конце функции щелчка:
$(this).text('Hello');
Здесь код: http://jsfiddle.net/r4emt/34/
Эта функция работает только в первый раз, так как после ее выполнения прослушиватель событий всегда будет оцениваться после нажатия клавиши, в результате чего поле ввода всегда будет иметь значение. Вы заметите, что как только вы нажмете кнопку, если вы наберете что-то и стираете ее, нажав кнопку backspace, она вернется к Hello.
Для достижения желаемых результатов, когда вы нажимаете кнопку "Отправить" на кнопке, поскольку вы очищаете вне поля ввода, вы также можете изменить текст там.
Смотрите: http://jsfiddle.net/r4emt/37/
Я только что добавил:
//refreshes button name
$(this).text('Hello');
до конца функции нажатия кнопки.
Используйте функцию "текст"
$("#inputWrapper").click(function () {
$(this).text(function(i, v){
return v === 'Hello' ? 'World' : 'Hello'
})