動的に生成されたアンカータグをクリックするとハイパーリンクテキストを取得します

Question

ボトルをhtmlテンプレートファイルに使用してsqlliteテーブルの内容を表示しようとしています。テンプレートファイルのハンドラコードを次に示します。

%for row in rows: 
    <tr> 
    %for col in row[0::2]: 
     <td><div class="box"><a class="button" href="#popup1" id ="a1">{{col}}</a></div></td> 
%end 
%end 

これは、データの3行（ページが生成されると、ブラウザで閲覧することができる以下のHTMLソースコードを参照）を使用してHTMLページに期待通りにテーブルをレンダリングします。

<tr><td><div class="box"><a class="button" href="#popup1" id ="a1">Testbatch1</a></div></td></tr> 

<tr><td><div class="box"><a class="button" href="#popup1" id ="a1">Testbatch2</a></div></td></tr> 

<tr><td><div class="box"><a class="button" href="#popup1" id ="a1">Testbatch3</a></div></td></tr> 

ここでは、リンク上にテキストを表示するための単純なJavaScriptコードを書いています。それは

<script language="javascript" type="text/javascript"> 
var batch = document.getElementById("a1").innerHTML; 
window.alert(batch) 
</script> 

をクリックします{{COL}}の値が今の問題は、私は警告ウィンドウに表示JS Testbatch1、ハイパーリンクのいずれかをクリックすると、です。

私もコードの下で試してみましたが、それでも

$('a1').click(function(){ 
window.alert($(this).text()); 
}); 

同じ出力をgetingすることは誰もがこのような動的に生成されたアンカータグのハイパーリンクテキストを取得する方法を私に示唆することはできますか？私の目的は、クリックしたときにハイパーリンクのテキストを読み込んで、Pythonコードに送り返し、SQLクエリのパラメータとして使用して、他の出力をレンダリングすることです。

Answer 1

あなたがリンク.buttonクラスのイベントをクリックし

$(document).on('click', ".button", function(){ 
    alert($(this).text()) 
}); 

Answer 2

識別子は一意である必要があります。重複IDを割り当てることはできません。 CSSクラスはイベントハンドラのバインディングに使用できます。ここではスニペットでアンカーにa1クラスを追加しました。

%for row in rows: 
    <tr> 
    %for col in row[0::2]: 
     <td><div class="box"><a class="button a1" href="#popup1">{{col}}</a></div></td> 
%end 
%end 

、動的に要素を生成するときに、イベントハンドラは、Event Delegationアプローチで.on()メソッドを使用するための結合

。

例

$(document).on('click', ".a1", function(){ 
    alert($(this).text()) 
}); 

documentの代わりに、あなたは、最寄りの静的なコンテナを使用する必要があります。