jQuery: evento click chiamato $ ('textarea'). Val(). Trim(). Times times

Question

Beh, questo è più o meno quello che succede.

Abbiamo già visto tutto questo: il pulsante diventa attivo e selezionabile solo dopo aver inserito qualcosa in un input archiviato. Sto cercando di implementarlo. Immagino che sia andato nel modo sbagliato e avrei dovuto posizionare i miei selettori jQuery in modo diverso, o è solo qualcosa che non va nel codice.

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

Fondamentalmente, vedo 'cliccato' nella console più volte, ma se aggiungo console.log('key pressed') prima del controllo if, è che viene mostrato una volta per keydown, come previsto.

Qualche consiglio?

Answer 1

Si può anche solo impostare il pulsante su disabled. Questo consentirà di evitare l'evento click da sparo:

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

quindi separare la funzione click:

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

JSFiddle example.

cosa è, non è in realtà un pulsante, ma un <a>

In questo caso è possibile utilizzare le classi, che suppongo sia una sorta di ciò che si sta facendo:

HTML :

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

JavaScript controllo lunghezza textarea:

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

funzione click JavaScript:

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

    alert('Clicked!'); 
}); 

JSFiddle example.

Answer 2

Si sta riconvocando l'evento click su ogni evento keyup.

Modificare il codice per verificare che il pulsante non è attivo prima di legare il click aggiungendo .inactive al selettore:

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

Ogni volta che si entra in una lettera (keyup), si aggiunge il evento clicca su .send-feedback.

Se si dispone di molti .send-feedback, avrete

(NBR di caratteri nella textarea) * (numero di Trasmettami-feedback)

volte compare il testo "cliccato".

È necessario aggiungere l'evento click solo se lo .send-feedback ha la classe "inattiva".

Qui:

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

ho creato this fiddle per te, spero che vi aiuterà:

Va in questo modo:

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

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

Spero non ho capito male il problema.