0

テーブルを使用してグリッドを動的に生成するスクリプトがあります。

//createGrid(height, width);
createGrid(1, 2);
//one row with 2 cols

これが作成されます：

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

クラスを追加/変更する td タグの onclick イベントが必要です。私は無駄にいくつかの解決策を試しました。何か案は？私はJqueryが苦手です。

4

3 に答える 3

4

動的に生成された要素の場合、イベントは委任する必要があります。要素またはオブジェクトの静的な親の1つから、次のメソッドdocumentを使用できます。on

$(document).on('click', 'td', function(){
   $('.selected').removeClass('selected');
   $(this).addClass('selected')
})
于 2012-10-27T20:57:38.503 に答える
0

find、liveおよびを使用する別の方法toggleClass

$("table").find("td").live("click", function() {
    $(this).toggleClass("selected");
});​

JsFiddle

于 2012-10-27T20:59:43.593 に答える
0

イベント委譲のために動的に生成されたアイテムをバインドするためにjquery関数を使用できます。これは、既存の要素をイベントにバインドし、動的に追加される要素もバインドします。$('td').click(function(){});既存の要素のみをバインドしますが、バインド後に動的に追加される要素はバインドしません。

$(document).on("click", "td", function(){
     alert("clicked");
});

委任されたイベント

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります (参照) 。

親要素セレクターを使用してドキュメントを変更できます。

于 2012-10-27T20:52:40.130 に答える