Question

这是我用于文本字段的代码

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

任何帮助都将不胜感激。

Answer 1

获取以“option”开头的ID

$("[id^=option]")

请参阅jquery文档：http://api.jquery.com/category/selectors/

Answer 2

这是完整的解决方案。

您可以使用.live（）将现有事件附加到新克隆的元素。

$("input[name='option']").live('keyup', function() { });|

工作演示：http://jsfiddle.net/f6zKy/

最终解决方案：http://jsfiddle.net/spJV3/5/

Answer 3

试试这个：

1）如果所有这些文本框都可以放在容器中，请执行此操作。 <div id='container'>

2）使用一个类来识别所有这些文本框。 <input type='text' class='optiontype' id='option' />

3）使用.delegate()或.on()（v1.7），这样您就不需要将事件附加到每个项目

$('#container').on('keyup', 'input.optiontype', function(e) {
   ...
});

当前设置的主要问题是.bind（）仅附加到现有对象

如何使用jQuery为每个动态创建的文本字段添加字符数？

3 个答案: