jquery - $.ajax が入力されたテキストエリアからユーザーが入力したテキストを取得できません

Question

データベースにクエリを実行する php スクリプトで $.ajax 呼び出しが成功した後に、DOM に追加され、入力されるテキストエリアがあります。

クエリ結果を含むテーブルが生成され、ユーザーが情報を変更できるように、テーブルの各行に [編集] ボタンと [保存] ボタンが追加されます。

ユーザーが変更できる 2 つのテキスト型入力とテキストエリア (その列からの大量のデータのため) があります。

2 つのテキスト入力は正常に機能します (変更はサーバーに保存されます)。しかし、ユーザーがテキストエリアから行った変更を取得できません。

テーブルの行は次のようになります。

<table id="tblBranchCoverage" width="100%">
    <thead>
        <tr>
            <th width="115px">County</th>
            <th>State</td>
            <th>Zip Codes</th>
        </tr>
    </thead>
    <tbody>
        <tr class="coverageRow" style="cursor: pointer;">
            <td class="countyCovered" width="115px">
                <label class="branchCountyCovered coverageDisplay" style="display: none;">Barrow</label>
                <input type="text" class="edit editBox editCounty" style="width: 111px;" value="Barrow"><br>
                <input type="submit" class="edit button submitCoverageEdits" style="" value="Save Changes"><br>
                <input type="submit" class="edit button cancelCoverageEdits" style="" value="Cancel">
                <input type="hidden" id="branchCoverageID" value="1">
            </td>
            <td class="stateCovered" width="30px">
                <label class="branchStateCovered coverageDisplay" style="display: none;">GA</label>
                <input type="text" class="edit editBox editState" style="width: 22px;" value="GA" max-length="2">
            </td>
            <td class="zipsCovered">
                <label class="branchZipsCovered coverageDisplay" style="display: none;">30028, 30040, 30041</label>
                <textarea class="edit editBox editZips" style="resize: none; overflow: hidden;" cols="100">30028, 30040, 30041</textarea>
            </td>
        </tr>
    </tbody>
</table>

そして、このjQueryで入力の値を取得しています:

$('#tblBranchCoverage').on('click', 'tr input.submitCoverageEdits', function() {

var $tr = $(this).parent().parent(),
    county = $tr.find('input.editCounty').val(),
    state = $tr.find('input.editState').val(),
    zips = $tr.find('textarea.editZips').text();
...
});

コンソールでテキストエリアの内容を確認する:

console.log('zips: ' + zips);

ユーザーが行った変更に関係なく、入力されたとおりのテキストのみを常に表示します。また、テキストエリアで .val() と .html() を試しましたが、すべて役に立ちませんでした。

これがテキストエリアでのみ機能しない理由と修正方法を誰か教えてもらえますか?

ありがとう。