より良いUIを目的としたコードの最適化

Question

これはどのように書き直しますか？それは動作しますが、一緒に投げ込まれました。目的：チェックボックスを含むTD要素内の任意の場所をクリックすると、チェックボックスが選択されます。

$('td input').filter(':checkbox').each(function() { 
    $(this).closest('td').addClass('CursorPointer'); 
}); 
$('td.CursorPointer').click(function() { 
    $('input:checkbox',this).click(); 
}); 
$('input:checkbox').click(function(myEvent) { 
    myEvent.stopPropagation(); 
}); 

これは、イベントリスナーを追加、またはデリゲートメソッドを使用しての良い例であるのだろうか。

Answer 1

$('td').has(':checkbox').addClass('CursorPointer').click(function(e) { 
    $('input:checkbox',this).click(); 
}).find(':checkbox').click(function(e){ 
    e.stopPropagation(); 
}); 

ここjsfiddleです：jQueryのでhttp://jsfiddle.net/gislikonrad/5G7ee/

Answer 2

まず：

$('td').has(':checkbox').addClass('CursorPointer'); 

第二同様sdleihssirhcのが、最善のは、あまりにも多くのバブリングしながら文書をオーバーロードしない（特定の要素をターゲット：

$('td input').filter(':checkbox').each(function() { 
    $(this).closest('td').addClass('CursorPointer'); 
}); 

は同じですイベント）。

$('#my-table-id').delegate('.CursorPointer', 'click', function() { 
    $(':checkbox', this).click(); 
}).delegate('input:checkbox', 'click', function (e) { 
    e.stopPropagation(); 
}); 

Answer 3

.click方法があればそうええ、それはおそらく、もう少し効率的になり、マッチしたグループ内のすべての単一の要素にclickイベントリスナーをアタッチ両方ともイベント委任を使用するように変更しました：

$(document).delegate('td.CursorPointer', 'click', function() { 
    $('input:checkbox', this).click(); 
}).delegate('input:checkbox', 'click', function (myEvent) { 
    myEvent.stopPropagation(); 
}); 

おそらく非常にやや効率的なフレーズth in jQueryで、それは不可欠なアイデアです。