0

clickページの読み込み後に作成されるものを含め、jQueryのイベントをクラスのすべてのインスタンスにバインドしようとしています。

次のコンポーネントがあります。

HTML

<table id='draft-board'>
    <tbody> 
        <tr id='1'>
            <td class='x'><img src='images/x.png' /></td>
            <td class='check available'><img src='images/checkmark.png' /></td>
            <td class='rank'>1</td>
            <td class='player'>Last, First</td>
        </tr>

. . .

Javascript

/*** this one works fine ***/
$('#draft-board tbody tr').on('click', 'td.x', function() {
    //do something...
    $(this).addClass('undo').removeClass('x');
});

/*** this one doesn't get triggered ***/
$('draft-board tbody tr').on('click', 'td.undo', function() {
    console.log('clicked undo');
    //do something else...
    $(this).addClass('x').removeClass('undo');
});

ご覧のとおり、ユーザーが class を含む表のセルをクリックするとx、 I が適用され、次に classと class がdo something交換されます。この部分は正常に動作します。xundo

動作しない部分は 2 番目のブロックでdo something else、ユーザーが class でテーブル セルをクリックしたときに実行しようとしますundo。ご覧のとおり、「クリックされた元に戻す」をそのブロック内のコンソールに記録して、on('click'...)イベントが発生しているかどうかを確認しようとしていますが、そうではありません。

私の理解では、jQuery で減価償却された関数を複製する新しい方法は、親要素live()を呼び出し.on()てから、メソッドのパラメーターで対象の子要素を渡すことでした。

undoただし、明らかに、ページが既にロードされた後にクラスが追加された表のセルは、その.on()イベントがそれらにバインドされていません。

考え？ありがとうございました。

4

1 に答える 1

3

#2 番目のハンドラーのセレクターに がありません。

$('draft-board tbody tr')->$('#draft-board tbody tr')

于 2013-07-26T20:23:17.147 に答える