2

AJAX を介してページ付けされているチェックボックスのテーブルがあります。これらの新しいチェックボックスのいずれかがクリックされたときのクリックイベントを作成しようとしています。クリックすると、その標準の ID に基づいて ID の配列を更新する必要があります。

問題は、AJAX 呼び出しの後に入力が取り込まれたときに Javascript を応答させる方法がわからないことです。ビューに入力をロードすると、クリック時のイベントは正常に機能しますが、AJAX を介して返されると認識されません。

次のようないくつかの同様の問題を調べました。

上記のいずれからも、問題の解決策が見つかりませんでした。ここに何が欠けているのか判断できません。

HTML

<table summary="Standard Listing Table">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Code</th>
            <th scope="col">Description</th>
        </tr>
    </thead>
    <tbody id="pl-standard-listing">
        <tr>
             <td>
                  <input checked="" name="standards[]" type="checkbox" value="8343">
             </td>
             <td>K.CC.A.1</td>
             <td>Count to 100 by ones and by tens.</td>
        </tr>
    </tbody>
</table>

クリックイベントのJquery

$('#pl-standard-listing tr td').on('click', 'input[type=checkbox]', function() {
    console.log("Clicked.");
    console.log(this);
});

API からのすべての標準への入力の追加

// Select table and whipe current standards that are listed
var table = document.getElementById('pl-standard-listing');
$('#pl-standard-listing tr').remove();
for(var iCount = 0; iCount < currentStandards.length; iCount++) {
    // Check if the standard is in the list of included standards with this grade group
    if(standardIds.indexOf(currentStandards[iCount].id) === -1) {
        $('#pl-standard-listing').append($('<tr><td><input name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /></td><td>' + currentStandards[iCount].code + '</td><td>' + currentStandards[iCount].description + '</td></tr>'));
    } else {
        $('#pl-standard-listing').append($('<tr><td><input checked name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /></td><td>' + currentStandards[iCount].code + '</td><td>' + currentStandards[iCount].description + '</td></tr>'));
    }
}

標準はビューに適切にロードされますが、チェックボックスをクリックするためのイベントハンドラーを正しく取得できません。どんな助けでも大歓迎です。

4

1 に答える 1