jQuery: 单击事件调用 $ ('textarea' ).val().trim().length 次

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')，它正在正如预期的那样，每次按键显示一次。

有什么建议吗？

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 .

thing is, it's not really a button, but an <a>

在那种情况下，您可以使用类，我想这就是您当前正在做的事情:

HTML:

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

JavaScript 文本区域长度检查:

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

JavaScript 点击函数:

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

    alert('Clicked!');
});

JSFiddle example .