1

私は live() ユーザーであり、どうにかして live() が非推奨であることを知っています。bind() を使用して、新しく追加された dom のイベントを機能させようとしましたが、そうではありません。

bind() を正しく行う方法を教えてください。または、このタスクを実行する他の方法はありますか?

これはhtmlです：

<table>
    <tr>
        <td> hi there <span class="click">click me</span></td>
    <tr>
    <tr>
        <td> hi there2 <span class="click">click me</span></td>
    <tr>
    <tr class="end">
        <td></td>
    </tr>
</table>
<button class="add_new">add new row</button>

これはjsです：

var new_row = '<tr><td> hi there, new row! <span class="click">click me</span></td><tr>';

$('.add_new').click(function() {
    $('.end').before(new_row);    
});


$('.click').bind('click', function() {
   alert('clicked');
});

可能であれば、プラグインではなく、ネイティブの jquery のメソッドを使用したいと考えています。これは私の jsfiddle ですhttp://jsfiddle.net/bondythegreat/z3uXH/

4

3 に答える 3

5

.on()jQuery のまたはの動的バージョンを使用する必要があります.delegate()。

$('table').on('click', '.click', function() {
    // your code here
});

委任されたイベント処理を使用した動的動作の基本的な考え方は、(jQuery オブジェクト内の) 最初の選択は、イベント ハンドラーのインストール後に動的に作成されない静的な親オブジェクトでなければならないということです。2 番目の引数として .on() に渡される 2 番目のセレクターは、イベント ハンドラーをオンにする特定の項目に一致するセレクターです。これらの項目は、イベント ハンドラーのインストール後に動的に作成できます。

コードが最初に実行されたときに存在するオブジェクトでのみ機能する静的イベント ハンドラーを使用.click()または取得します。.bind()

このコードをより堅牢にするために、2 つのことをお勧めします。まず、イベントと混同しやすい「クリック」などのクラス名を使用しないでください。"table"次に、ページ内の他のテーブルで誤ってアクティブになる可能性のある非常に一般的なものではなく、最初のセレクターで ID を参照できるように、テーブルに ID を配置します。

于 2012-04-10T06:54:19.623 に答える
1

jQueryのメソッドを使用する必要がありますon()

そのように：

$('table').on('click', '.click', function() {
   alert('clicked');
});

</p>

于 2012-04-10T06:50:53.197 に答える
1

jQuery 1.7+ 以降live()は に置き換えられましたon()。のドキュメント ページにlive()は、新しいメソッドに更新する方法のガイドがあります。

あなたの場合、それは次のように変換されます：

$('table').on('click','.click', function() {
   alert('clicked');
});

変更された動作中のフィドルを参照してください

于 2012-04-10T06:55:51.997 に答える