jQuery: щелкните событие с именем $('textarea').вал().отделка().раз длина

Ну, это в значительной степени то, что происходит.

Мы все видели это раньше: кнопка становится активной и кликабельной только после того, как мы поместили что-то во входной файл. Я пытаюсь это осуществить. Я думаю, что либо я пошел не в ту сторону, и я должен был поместить мои селекторы jQuery по-другому, или это просто что-то не так с кодом.

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length){
        $('.send-feedback').removeClass('inactive').click(function(){
            console.log('clicked');
        });
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})

В принципе, я вижу, что "нажал" в консоли несколько раз, но если я добавлю console.log('key pressed') Перед проверкой if, это будет показано один раз в секунду. вниз, как и ожидалось.

Какой-нибудь совет?

4 6
html jquery events keydown

4 ответа:

Вы можете также просто установить кнопку на disabled. Это предотвратит запуск события click: 

if($('textarea').val().trim().length > 0)
    $('.send-feedback').removeAttr('disabled');
else
    $('.send-feedback').attr('disabled','disabled');

Затем отделите свою click функцию: 

$('textarea').on('input', function(){ ... });
$('.send-feedback').on('click', function() { ... });

Пример JSFiddle .

Дело в том, что на самом деле это не кнопка, а <a>

В этом случае вы можете использовать классы, что, я полагаю, является своего рода тем, что вы сейчас делаете:

HTML: 

<a href="#" class="send-feedback disabled">Click</a>

JavaScript textarea проверка длины: 

if( $(this).val().trim().length > 0 )
    $('.send-feedback').removeClass('disabled');
else
    $('.send-feedback').addClass('disabled');

JavaScript click функция: 

$('.send-feedback').on('click', function(e) {
    e.preventDefault();
    if($(this).hasClass('disabled'))
        return;

    alert('Clicked!');
});

Пример JSFiddle .

6

Вы повторно привязываете событие click к каждому событию keyup.

Измените код, чтобы проверить, что кнопка неактивна перед привязкой щелчка, добавив .inactive к селектору: 

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length){
        $('.send-feedback.inactive').removeClass('inactive').click(function(){
            console.log('clicked');
        });
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})

Пример JSFiddle

2

Каждый раз, когда вы вводите букву (keyup), вы добавляете событие click в .send-feedback.

Если у вас много .send-feedback, у вас будет

(nbr символов в textarea) * (число .отправить-обратная связь)

Время появления текста" щелчок".

Вы должны добавить событие click только в том случае, если .send-feedback имеет класс "неактивный".

Здесь: 

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length) {
        if ($('.send-feedback').hasClass('inactive')){
            $('.send-feedback').removeClass('inactive').click(function(){
                console.log('clicked');
            });
        }
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})
1

Я создал эту скрипку для вас, я надеюсь, что это поможет:

Это звучит так: 

var el = $(this);
var btn = $("#btnDoStuff");

if(el.val().length > 0)
    btn.prop("disabled", false);
else
    btn.prop("disabled", true);

Надеюсь, я правильно понял вопрос.

0