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

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

Скрипка:http://jsfiddle.net/r4emt/12/

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

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

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

13
button javascript jquery jquery-autocomplete jquery-ui

7 ответов

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

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

и в конце вашего кнопки:

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

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

важно: не используйте jquerys text () на элементах кнопок!

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

посмотреть документация по API jQuery.

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

8

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

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

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

1

jsFiddle работает демо 

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

поставьте условие так

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

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

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

вот код: http://jsfiddle.net/r4emt/34/

0

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

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

см.:http://jsfiddle.net/r4emt/37/

Я добавил:

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

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

0

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

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