Счетчик символов JQuery для динамически добавленных текстовых полей

Question

Я динамически добавляю текстовые поля при нажатии кнопки с помощью JQuery. Мне нужно добавить счетчик символов под каждым текстовым полем, которое добавляется, так как пользовательские типы могут видеть, сколько символов осталось.

Прямо сейчас, что он делает, отображается элемент div, но он обрабатывает каждое текстовое поле с тем же обратным отсчетом символов, а не подсчитывает символы в каждом текстовом поле. Я попытался использовать .each и .map для прокрутки тега div UpdateCounter, но продолжать получать те же результаты. Как я могу улучшить это, чтобы сообщить счетчик символов в каждом текстовом поле? Благодарения и

Этот Fiddle иллюстрирует проблему: https://jsfiddle.net/7com4vqz/1/

HTML:

<input type='button' value='+' id='addUpdate'> 
<input type='button' value='-' id='removeUpdate'> 

<div id='TextBoxesGroup'>   
    <div id="TextBoxDiv1"> 
     <h4>Update #1</h4> 
     <textarea id="txtUpdates1" name="txtUpdates1" cols="130" rows="5" maxlength="500" class="form-control" placeholder="500 characters max"></textarea> 
     <div id="updateCounter1"></div> 
    </div> 
</div> 

JQuery:

//Dynamically added updates. 
var counter = 2; 
$("#addUpdate").click(function() 
{ 
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter); 
    newTextBoxDiv.after().html('<h4>Update #' + counter + '</h4>' + 
    '<textarea cols="130" rows="5" maxlength="500" class="form-control" placeholder="500 characters max" name="txtUpdates"' + counter + '" id="txtUpdates' + counter + '" value="">'); 
    newTextBoxDiv.appendTo("#TextBoxesGroup"); 

    var newCounter = $(document.createElement('div')).attr("id", 'updateCounter' + counter); 
    newCounter.after().html('<div name="updateCounter"' + counter + '" id="updateCounter' + counter + '" value="">'); 
    newCounter.appendTo("#TextBoxesGroup"); 

    counter++; 
}); 

$("#removeUpdate").click(function() 
{ 
    if (counter == 1) 
    { 
     alert("No more textboxes to remove"); 
     return false; 
    } 

    counter--; 

    $("#TextBoxDiv" + counter).remove(); 
}); 


$('body').on('keyup', '[id^=txtUpdates]', function() 
{ 
    var max = 500; 
    var len = $(this).val().length; 

    if (len >= max) 
    { 
     $('[id^=updateCounter]').text(' you have reached the limit'); 
    } 

    else 
    { 
     var char = max - len; 
     $('[id^=updateCounter]').text(char + ' characters left'); 
    } 
}); 

Answer 1

Try this

Я только должен был добавить атрибут на вашем textarea и t обновите свой jQuery до:

$('body').on('keyup', '[id^=txtUpdates]', function() 
{ 
    var max = 500; 
    var len = $(this).val().length; 

    if (len >= max) 
    { 
     $('#' + $(this).attr('data-id')).text(' you have reached the limit'); 
    } 

    else 
    { 
     var char = max - len; 
     $('#' + $(this).attr('data-id')).text(char + ' characters left'); 
    } 
});