6

嗯，这就是发生的事情。

我们以前都见过这种情况：只有在我们将某些内容放入输入字段后，按钮才会变为活动且可点击。我正在尝试实现这一点。我想要么我走错了路，我应该以不同的方式放置我的 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');
    }
}})

基本上，我在控制台中多次看到“点击”，但如果我在检查console.log('key pressed')之前添加if，它会按预期显示一次。

有什么建议吗？

4

4 回答 4

8

您也可以将按钮设置为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 示例。

问题是，它实际上不是一个按钮，而是一个<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 示例。

于 2013-03-28T10:56:27.927 回答
2

您正在重新绑定每个 keyup 事件的 click 事件。

.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 示例

于 2013-03-28T10:56:54.927 回答
1

每次输入字母（keyup）时，都会将事件 click 添加到.send-feedback。

如果你有很多.send-feedback，你就会有

（文本区域中的字符数）*（.send-feedback 的数量）

出现“点击”文本的次数。

.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');
    }
}})
于 2013-03-28T10:57:07.850 回答
0

我为你创建了这个小提琴，我希望它会有所帮助：

它是这样的：

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

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

我希望我没有误解这个问题。

于 2013-03-28T11:06:30.733 回答