クリックイベントをtd対テーブルにバインド

Question

私はHTMLのようなユーティリティのようなExcelを構築したい。私は20行& 20列のテーブル[id "myTbl"]を持っているとします。私はtdテキストをその値としてユーザがクリックするたびにtdの中にテキストボックスを追加したいと思います。

私のテーブルは、私は[両方が正常に動作している]これを達成するために2つのオプションをした

あるとし

オプションI

$("#myTbl").bind("click",function(e){ 
    var obj = e.target; 
    if(obj.nodeName == "TD"){ 
     $(obj).html("<input type='text' value='"+$(obj).html()+"'></input>"); 
    } 
}); 

オプションII

$("#myTbl tr td").bind("click",function(e){ 
    if($("input",$(this)).length==0){ 
     $(this).html("<input type='text' value='"+$(this).html()+"'></input>"); 
    } 
}); 

私の質問はwhiですchオプションはパフォーマンス面で優れています。

Answer 1

最初の2つのオプションはイベントハンドラを1つしか作成しないため、よりパフォーマンスが向上します。 あなたがそうしているようにイベントを介してターゲットを取得することは無視できます。

それを「jQueryの」道を行うには、あなたがdelegateを使用することがありますが：

$("#myTbl").delegate("td", "click", function() { 
    var $this = $(this); 
    $this.html("<input type='text' value='"+$this.text()+"'></input>"); 
}); 

Answer 2

各セルのすべてのクリックハンドラーを維持する余分なオーバーヘッドがないため、テーブルにバインドする方がずっと良いと言えます。