it-swarm.com.ru

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

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

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

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

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

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

13
sbru

Здесь это рабочая скрипка. Изменения сделаны:

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

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

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

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

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

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

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

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

9
User2

jsFiddle Working Demo

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

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

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

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

1
indot_brad

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

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

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

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

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

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

0
jth_92

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

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

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

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

удалить ненужные места. Также вы должны изменить текст кнопки на «Hello» в обработчике события click

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

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

0
armandocj