jquery字符計數器動態添加文本框

Question

我動態地添加文本字段按鈕點擊使用jquery。我需要在每個添加的文本字段下添加一個字符計數器，以便用戶鍵入時可以看到剩餘的字符數。

現在，它所做的是顯示div元素，但它將每個文本字段與相同的字符倒數對待，而​​不是計算每個文本字段中的字符。我試圖使用.each和.map循環訪問updateCounter div標籤，但仍然得到相同的結果。我怎樣才能改善這個報告每個文本字段上的字符計數器？ Thanks-

這小提琴說明了這個問題：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

嘗試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'); 
    } 
});