jQuery .append DOMアップデート

Question

私は、ユーザーが自分のスクリプトをフォームに追加して送信できるページがあります。私は.append()を使用して、ユーザーが新しいスクリプトを必要に応じて追加できるようにしていますが、新しいスクリプトが追加されたときに、そのスクリプトの文字カウントは機能しません。 DOMを更新する方法があるので、これらの新しいdivも認識されますか？

が

var $scriptNumber = 2; 
 
$('.script').keyup(charCount); 
 
$('#new-script').click(addScript); 
 

 
function charCount() { 
 
\t var $chars = $(this).val().length; 
 
\t $(this).siblings('.char-count').html($chars + ' Characters'); 
 
} 
 

 
function addScript() { 
 
\t $('#scripts').append('<div id="script-' + $scriptNumber + '-wrap" class="script-wrap"><label for="script-1">Script ' + $scriptNumber + '</label><textarea id="script-' + $scriptNumber + '" class="script" cols="40" rows="3"></textarea><span class="char-count">0 Characters</span></div>'); 
 
    $scriptNumber++; 
 
}

#scripts { 
 
    padding: 12px; 
 
} 
 
.script-wrap { 
 
    margin-bottom: 12px; 
 
} 
 
label { 
 
    font-weight: bold; 
 
} 
 
textarea { 
 
    width: 100%; 
 
} 
 
#new-script { 
 
    margin-left: 12px; 
 
    padding: 4px 12px; 
 
    background: purple; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 
#new-script:hover { 
 
    background: blue; 
 
}

<div id="scripts"> 
 
    <div id="script-1-wrap" class="script-wrap"> 
 
    <label for="script-1">Script 1</label> 
 
    <textarea id="script-1" class="script" cols="40" rows="3"></textarea> 
 
    <span class="char-count">0 Characters</span> 
 
    </div> 
 
</div> 
 
<span id="new-script">New Script</span>

Answer 1

変更ライン$(document).on('keyup', '.script', charCount);から$('.script').keyup(charCount);：ここ

はexmapleです。

この問題は、動的に作成された要素であるために発生しています。このため、読み込み時にページ上に存在するものに関数をアタッチする必要があります。

ここでは動作しますJS Fiddle例