jQuery: nhấp vào sự kiện được gọi là $ ('textarea'). Val(). Trim(). Length times

Question

Vâng, đó là khá nhiều những gì sẽ xảy ra.

Tất cả chúng ta đã thấy điều này trước đây: nút trở thành hoạt động và có thể nhấp chỉ sau khi chúng tôi đã đặt nội dung nào đó vào mục nhập. Tôi đang cố gắng thực hiện điều đó. Tôi đoán hoặc là tôi đã đi sai đường và tôi nên đã đặt bộ chọn jQuery của tôi một cách khác nhau, hoặc nó chỉ là một cái gì đó sai với mã.

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

Về cơ bản, tôi thấy 'nhấp' trong giao diện điều khiển nhiều lần, nhưng nếu tôi thêm console.log('key pressed') trước khi kiểm tra if, nó đang được hiển thị một lần mỗi KeyDown, như mong đợi.

Bạn có lời khuyên nào không?

Answer 1

Bạn cũng có thể chỉ cần đặt nút thành disabled. Điều này sẽ ngăn chặn các sự kiện click từ bắn:

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

Sau đó, tách chức năng click của bạn:

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

JSFiddle example.

Có điều là, nó không thực sự là một nút, nhưng một <a>

Trong trường hợp đó bạn có thể sử dụng các lớp học, mà tôi giả sử là loại gì bạn đang thực hiện:

HTML :

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

Javascript chiều dài textarea kiểm tra:

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

hàm JavaScript nhấp chuột:

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

    alert('Clicked!'); 
}); 

JSFiddle example.

Answer 2

Bạn đang rebinding sự kiện nhấp vào mọi sự kiện keyup.

Thay đổi mã để kiểm tra xem các nút không hoạt động trước khi ràng buộc các nhấp chuột bằng cách thêm .inactive để chọn:

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

Mỗi khi bạn nhập một chữ cái (KeyUp), bạn thêm sự kiện nhấp vào .send-feedback.

Nếu bạn có nhiều .send-feedback, bạn sẽ phải

(nbr của chars trong textarea) * (số .send phản hồi)

lần "nhấp vào" văn bản xuất hiện.

Bạn chỉ nên thêm sự kiện nhấp nếu .send-feedback có lớp "không hoạt động".

đây:

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

Tôi đã tạo this fiddle cho bạn, tôi hy vọng nó sẽ giúp:

Nó đi như thế này:

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

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

Tôi hy vọng tôi không hiểu lầm vấn đề.