Как добавить количество символов для каждого динамически создаваемого текстового поля с помощью jQuery?

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

Вот полное решение.

Вы можете прикрепить существующее событие к новым клонированным элементам, используя .live ().

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

Рабочая демонстрация: http://jsfiddle.net/f6zKy/

Окончательное решение: http://jsfiddle.net/spJV3/5/

Answer 2

для получения идентификатора, который начинается с "option"

$("[id^=option]")

см. Документацию jquery: http://api.jquery.com/category/selectors/

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 () присоединяется только к существующим объектам