jQuery: $ ('textarea') नामक ईवेंट पर क्लिक करें। Val()। Trim()। लंबाई के समय

Question

अच्छा, यह बहुत कुछ होता है।

हमने यह सब पहले देखा है: बटन सक्रिय हो गया है और क्लिक किए गए केवल इनपुट किए गए इनपुट में कुछ डालने के बाद। मैं इसे लागू करने की कोशिश कर रहा हूं। मुझे लगता है कि या तो मैं गलत तरीके से चला गया हूं और मुझे अपने 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'); 
    } 
}}) 

असल में, मैं देख रहा हूँ कंसोल से अधिक बार 'क्लिक किया', लेकिन अगर मैं if जांच से पहले console.log('key pressed') जोड़ने के लिए, यह, के रूप में उम्मीद एक बार keydown प्रति दिखाया जा रहा है।

कोई सलाह?

Answer 1

आप बटन को 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 example।

बात है, है वास्तव में एक बटन है, यह नहीं है, लेकिन एक <a>

उस मामले आप कक्षाएं, जो मुझे लगता है कि उपयोग कर सकते हैं में आप वर्तमान में क्या कर रहे हैं की तरह है:

एचटीएमएल :

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

जावास्क्रिप्ट पाठ क्षेत्र लंबाई की जांच:

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

जावास्क्रिप्ट क्लिक समारोह:

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

    alert('Clicked!'); 
}); 

JSFiddle example।

Answer 2

आप प्रत्येक कुंजीपटल ईवेंट पर क्लिक ईवेंट को पुन: संयोजित कर रहे हैं।

बदलें कोड की जाँच करने के लिए उस बटन चयनकर्ता के .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 Example

Answer 3

हर बार जब आप एक पत्र (KeyUp) दर्ज करें, जिसे आप जोड़ना घटना .send-feedback पर क्लिक करें।

आप कई .send-feedback है, तो आप

(पाठ क्षेत्र में वर्ण की NBR) * (.send-प्रतिक्रिया की संख्या)

बार "क्लिक" पाठ दिखाई होगा।

यदि आपको .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'); 
    } 
}}) 

Answer 4

मैं तुम्हारे लिए this fiddle बना लिया है, मुझे आशा है कि यह मदद मिलेगी:

यह इस प्रकार है:

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

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

मुझे आशा है कि मैं गलत समझा नहीं था समस्या।