1

コードを含むやや単純なHTMLテーブルがあります

<table><tr><td id=tdFavicon><b>Favicon</b></td></tr></table>

コードを使用してイベントをバインドしたい

$(tdFavicon).bind('click', saveOption);

しかし、私の問題はコードを使用するときです

function saveOption() {alert(event.target.id);}

セル内のテキストがクリックされたときではなく、セルがクリックされたときに警告されるID「tdFavicon」のみを取得します。

これは機能するはずですが、私のコードが複雑になりすぎたのかもしれません。この例のためにそれを変更しました。バインドするテーブル セル内のテキストの ID を使用してスパンを作成することもできますが、これが機能しない理由を知りたいです。誰でもこの作業を手伝ってもらえますか?

4

2 に答える 2

2

イベントの泡。つまり、要素をクリックすると、その要素のクリック ハンドラーが検索されます。見つからない場合は、親要素を検索し、次に親の親をルート要素まで検索します。

event.targetイベントを生成した要素 (タグ) もそうですが、イベント<b>を処理した要素 (タグ) はそうではありません<td id="tdFavicon">。jQuery は、呼び出されたハンドラー関数 (の値) のコンテキストとして、イベントを処理thisした要素を提供します。

つまり、あなたがする必要があるのはこれだけです：

function saveOption() {
    alert(this.id);
}
$('#tdFavicon').bind('click', saveOption);

または、もっと簡単に：

$('#tdFavicon').bind('click', function {
    alert(this.id);
});

動作することの証明

于 2012-10-02T00:35:13.803 に答える
2

これを試してください (注: を使用しても$(tdFavicon)動作する可能性がありますが、保証されているわけではなく、セレクターを使用するよりも遅くなります"#tdFavicon"。)

$("#tdFavicon").bind('click', function(ev){
 saveOption(this,ev);
});

function saveOption(elem,ev) {
 alert("table cell: " + elem.id + "  object clicked: " + ev.target.tagName);
}

コードが機能しなかった理由は、クリックからのイベントが実際にはテキスト要素にあったため、それが得られたものでした-空のIDです。全体として、コードは問題なく実行されましたが、論理エラーが発生しただけです。

于 2012-10-02T00:29:05.827 に答える