jQuery：单击事件称为 $('textarea').val().trim().length 次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15679909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: click event called $('textarea').val().trim().length times
提问by Anton Matyulkov
Well, that's pretty much what happens.
嗯，这就是发生的事情。
We've all seen this before: button becomes active and clickableonly after we've put something in an input filed. I'm trying to implement that. I guess either I've gone the wrong way and I should've placed my jQuery selectors differently, or it's just something wrong with the code.
我们以前都看到过：只有在我们将某些内容放入输入字段后，按钮才会变为活动状态并且可点击。我正在努力实现这一点。我想要么我走错了路，我应该以不同的方式放置我的 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');
}
}})
Basically, I see 'clicked' in the console multiple times, but if I add console.log('key pressed')before the ifcheck, it's being shown once per keydown, as expected.
基本上，我在控制台中多次看到“点击”，但如果我console.log('key pressed')在if检查之前添加，它会按预期显示一次。
Any advice?
有什么建议吗？
回答by James Donnelly
You may as well just set the button to disabled. This will prevent the clickevent from firing:
您也可以将按钮设置为disabled。这将阻止click事件触发：
if($('textarea').val().trim().length > 0)
$('.send-feedback').removeAttr('disabled');
else
$('.send-feedback').attr('disabled','disabled');
Then separate your clickfunction:
然后分离你的click功能：
$('textarea').on('input', function(){ ... });
$('.send-feedback').on('click', function() { ... });
thing is, it's not really a button, but an
<a>
问题是，它实际上不是一个按钮，而是一个
<a>
In that case you can use classes, which I suppose is sort of what you're currently doing:
在这种情况下，您可以使用类，我想这就是您目前正在做的事情：
HTML:
HTML：
<a href="#" class="send-feedback disabled">Click</a>
JavaScript textarea length check:
JavaScript textarea 长度检查：
if( $(this).val().trim().length > 0 )
$('.send-feedback').removeClass('disabled');
else
$('.send-feedback').addClass('disabled');
JavaScript click function:
JavaScript 点击功能：
$('.send-feedback').on('click', function(e) {
e.preventDefault();
if($(this).hasClass('disabled'))
return;
alert('Clicked!');
});
回答by Richard Dalton
You are rebinding the click event on every keyup event.
您正在重新绑定每个 keyup 事件上的 click 事件。
Change the code to check that the button is inactive before binding the click by adding .inactiveto the selector:
通过添加.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');
}
}})
回答by Cyril N.
Every time you enter a letter (keyup), you add the event click to .send-feedback.
每次输入字母 (keyup) 时，都会将事件 click 添加到.send-feedback。
If you have many .send-feedback, you'll have
如果你有很多.send-feedback，你就会有
(nbr of chars in textarea) * (number of .send-feedback)
（文本区域中的字符数）*（.send-feedback 的数量）
times the "clicked" text appear.
出现“点击”文本的次数。
You should only add the click event if the .send-feedbackhas the class "inactive".
如果.send-feedback类具有“非活动”类，您应该只添加单击事件。
Here :
这里 ：
$('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');
}
}})
回答by Dimitar Dimitrov
I've created this fiddlefor you, I hope it will help:
我已经为你创建了这个小提琴，我希望它会有所帮助：
It goes like this:
它是这样的：
var el = $(this);
var btn = $("#btnDoStuff");
if(el.val().length > 0)
btn.prop("disabled", false);
else
btn.prop("disabled", true);
I hope I didn't misunderstood the issue.
我希望我没有误解这个问题。
