Как изменить текст кнопки в JQuery

У меня есть этот рабочий код:

Прямо сейчас, прежде чем вводить автозаполнение JQuery UI, кнопка читает "Hello". Вы можете ввести "элемент" в автозаполнение JQuery UI, и вы заметите, что кнопка теперь говорит "Мир". Нажмите кнопку "Мир", чтобы поместить элемент в список. Если вы снова наберете элемент, вы можете выбрать его и нажать кнопку "Заменить" на элементе, который уже есть в списке. Однако, как только вы это сделаете, кнопка все еще говорит "мир", но она должна сказать "привет" , потому что в поле ввода ничего нет. Если вы нажмете в поле ввода, а затем нажмете стрелку "Удалить" или "Назад", она вернется к "привет" , но ничего не удастся удалить или перейти влево. Я думаю, что это связано с этой частью кода:

$('#inputWrapper').on('keyup', '#tags', function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');
    }
});

В частности, часть "keyup". Поэтому мой вопрос заключается в том, как я могу исправить это, так что всякий раз, когда поле ввода пуст, кнопка всегда читает "привет" , а когда есть вход в поле, кнопка читает "мир"? Спасибо!

Ответ 1

Здесь - рабочая скрипка. Сделаны следующие изменения:

$('#tags').keyup( function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');        
    }
});

и в конце вашей кнопки нажмите:

$('#tags').val('');
$('#tags').keyup();

Ответ 2

Я знаю, что это длинный мертвый поток, но мне нужно было добавить это, потому что я только что потратил 2 дня на отслеживание утечки памяти (вызванный мной с использованием кода с этой страницы).

ВАЖНО: Не используйте jQuerys text() для элементов кнопок!

Функция создает что-то в DOM, которое нельзя удалить пустым(). Если вы затем вызовете функцию несколько раз в течение длительного периода, большое количество мусора будет плюхнуто в ваш DOM, в результате чего материал сломается.

См. документацию jQuery API.

(Не могу найти, где именно упоминается в документации, но где-то там, я должен бежать за своим поездом сейчас)...

Ответ 3

Не могли бы вы просто вернуть текст в Hello после его щелчка? Добавьте это в нижнюю часть кнопки:

$(this).text('Hello');

http://jsfiddle.net/r4emt/13/

Ответ 4

jsFiddle Рабочая демонстрация

    $('#inputWrapper').on('keyup', '#tags', function() {
        if($(this).val() == "") {
            $('button.addButton').html('Hello1');
        } else {
            $('button.addButton').html('World');
        }
    });

Ответ 5

Поместите условие, подобное этому

if($.trim($(this).val()) == '')

удалить ненужные пробелы. Кроме того, вы должны изменить текст кнопки на "Hello" в обработчике события click

Добавьте это в конце функции щелчка: $(this).text('Hello');

Здесь код: http://jsfiddle.net/r4emt/34/

Ответ 6

Эта функция работает только в первый раз, так как после ее выполнения прослушиватель событий всегда будет оцениваться после нажатия клавиши, в результате чего поле ввода всегда будет иметь значение. Вы заметите, что как только вы нажмете кнопку, если вы наберете что-то и стираете ее, нажав кнопку backspace, она вернется к Hello.

Для достижения желаемых результатов, когда вы нажимаете кнопку "Отправить" на кнопке, поскольку вы очищаете вне поля ввода, вы также можете изменить текст там.

Смотрите: http://jsfiddle.net/r4emt/37/

Я только что добавил:

//refreshes button name
$(this).text('Hello');

до конца функции нажатия кнопки.

Ответ 7

Используйте функцию "текст"

       $("#inputWrapper").click(function () {
        $(this).text(function(i, v){
           return v === 'Hello' ? 'World' : 'Hello'
        })