jQuery: kliknij wydarzenie o nazwie $ ("textarea"). Val(). Trim(). Length times

Question

Cóż, to prawie tyle, co się dzieje.

Wszyscy już to widzieliśmy: przycisk staje się aktywny i klikalny dopiero po dodaniu czegoś do pliku wejściowego. Próbuję to zaimplementować. Sądzę, że albo podążyłem w niewłaściwy sposób i powinienem inaczej ustawić selektory jQuery, albo po prostu coś jest nie tak z kodem.

$('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'); 
    } 
}}) 

Zasadniczo widzę „kliknięciu” w konsoli wiele razy, ale jeśli dodać console.log('key pressed') przed kontrolą if, to wykazanie raz na keydown, jak oczekiwano.

Każda rada?

Answer 1

Możesz równie dobrze ustawić przycisk na disabled. Zapobiegnie to zdarzenie click z odpaleniem:

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

Następnie oddzielić funkcję click:

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

JSFiddle example.

rzeczą jest, to nie jest tak naprawdę guzik, ale <a>

W tym przypadku można użyć klasy, które Załóżmy jest rodzajem co aktualnie robi:

HTML :

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

JavaScript długość textarea check:

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

JavaScript kliknięciem funkcja:

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

    alert('Clicked!'); 
}); 

JSFiddle example.

Answer 2

Przypisujecie zdarzenie click na każdym zdarzeniu kluczowania.

Zmień ten kod, aby sprawdzić, czy przycisk jest nieaktywny przed wiążące kliknięcie dodając .inactive do selektora:

$('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 Example

Answer 3

każdym razem wpisać literę (keyup), należy dodać kliknij wydarzenie na numer .send-feedback.

Jeśli masz wiele .send-feedback, musisz

(NBR z znaków w textarea) * (liczba .send-feedback)

razy pojawiają się z "kliknięciu" text.

Zdarzenie click należy dodawać tylko wtedy, gdy klasa .send-feedback jest "nieaktywna".

tutaj:

$('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'); 
    } 
}}) 

Answer 4

Utworzyłem this fiddle dla ciebie, mam nadzieję, że to pomoże:

To idzie tak:

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

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

Mam nadzieję, że nie zrozumiał problem.