如何使用 jQuery 为每个动态创建的文本字段添加字符数？
这是我用于文本字段的代码，
$('#option').bind('keyup', function() {
var maxchar = 140;
var cnt = $(this).val().length;
var remainingchar = maxchar - cnt;
$('#charsLeft').html(remainingchar);
if(remainingchar > 0){
$('#charsLeft').css('color', 'green');
}else{
$('#charsLeft').css('color', 'red');
}
});
效果很好，但现在我需要将其应用于克隆的所有文本输入。每个克隆的输入字段都会添加一个数字。
例如：
option1
option2
option3 ...
我正在尝试这个，但没有走得太远：
var list = [];
for (var i = 1; i <= 3; i++) {
list.push(i);
}
$(list).each( function(i, val){
$('#option').limit('140', '#charsLeft');
});
任何帮助将不胜感激。
This is the code that I am using for my text fields
$('#option').bind('keyup', function() {
var maxchar = 140;
var cnt = $(this).val().length;
var remainingchar = maxchar - cnt;
$('#charsLeft').html(remainingchar);
if(remainingchar > 0){
$('#charsLeft').css('color', 'green');
}else{
$('#charsLeft').css('color', 'red');
}
});
This works great but now I need to apply it to all text inputs that are cloned. Each cloned input field gets a number added to it.
For example:
option1
option2
option3 ...
I was playing around with this but didn't get far:
var list = [];
for (var i = 1; i <= 3; i++) {
list.push(i);
}
$(list).each( function(i, val){
$('#option').limit('140', '#charsLeft');
});
Any help would be appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是完整的解决方案。
您可以使用 .live() 将现有事件附加到新克隆的元素。
工作演示：http://jsfiddle.net/f6zKy/
最终解决方案：http://jsfiddle.net/spJV3/5/
Here is the complete solution.
You can attach the existing event to newly cloned elements using .live().
The working demo: http://jsfiddle.net/f6zKy/
Final Solution: http://jsfiddle.net/spJV3/5/
要获取以“option”开头的 ID
，请参阅 jquery 文档： http://api.jquery.com/category /选择器/
to get ID that starts with "option"
see jquery documentation: http://api.jquery.com/category/selectors/
尝试这样做：
1）如果所有这些文本框都可以放入容器中，请这样做。
2) 使用一个类来标识所有这些文本框。
3) 使用
.delegate()或.on()(v1.7)，这样您就不需要将事件附加到每个项目当前设置的主要问题是 .bind() 仅附加到现有对象
try this:
1) if all of those textboxes can be put inside a container, do so.
<div id='container'>2) use a class to identify all of those textbox.
<input type='text' class='optiontype' id='option' />3) use
.delegate()or.on()(v1.7), this way you won't need to attach the event to each itemThe main issue with your current setup is that .bind() only attaches to the existing objects