1

マークアップを動的に生成し、次のように DOM に挿入します。

content+='<td><a class="reportLink" onclick="showReport();return false;" href="'+layerResults.features[i].attributes['Information_External']+'">Info</a></td>';

インライン ハンドラーを使用する代わりに、jQuery を使用してクリック ハンドラーをアタッチする方がよいことはわかっています。

問題は、インライン ハンドラーと次のような関数を使用しても、次のとおりです。

function showReport() {
  console.log('stopped');
}

それでも、リンクが私のページから移動するのを妨げません。

2番目の問題は、使用しようとすると

jQuery('.reportLink'.on('click', function(e) {
  e.preventDefault();
  console.log('clicked');
});

イベントが添付されることはありません。jQuery 1.7.2 を使用しています。

これは、jQuery <= 1.5 で何十億回も行った単純なタスクであるため、私は少し正気ではありません。

4

2 に答える 2

7

DOM のロード時に存在する親要素にイベント ハンドラーを委譲します。bodyその親と交換できます。

jQuery('body').on('click','.reportLink', function(e){
   e.preventDefault();
   console.log('clicked');
});

jquery docs .on()から

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する場合のドキュメントなどです。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

まだ作成されていない子孫要素のイベントを処理できることに加えて、委譲イベントのもう 1 つの利点は、多くの要素を監視する必要がある場合に、オーバーヘッドを大幅に削減できる可能性があることです。tbody に 1,000 行あるデータ テーブルで、この例では、ハンドラを 1,000 要素にアタッチします。

于 2012-08-06T21:27:08.053 に答える
0

移動しないようにするには、「console.log('stopped');」の直後にこれを入力します。

return false;

2番目のものについては、通常、この構文を使用します。おそらく役立つでしょう：

jQuery(".reportLink").click(function() {
    //do something
});
于 2012-08-06T21:27:00.737 に答える