单击动态生成的锚标记时，获取超链接文本

Question

I am trying to display contents of sqllite table using bottle on html template file. And here is the handler code in the template file.

%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

It render the table as per the expectation on html page with three rows as data(please refer the below html source code which can be viewed on browser once the page is generated).

<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>

Now I have written simple javascript code to display text on the link ie. value of {{col}} when it gets clicked

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

Now problem is, when I click on any of the hyperlink, JS display Testbatch1 in alert window.

I have also tried with below code, but still geting the same output

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

Can anyone suggest me how to get the hyperlink text of such dynamically generated anchor tags? My aim is to read the text of the hyperlink when clicked and send back to my python code where I will use it as paramter for sql query to render some other output.

Answer 1

As Identifiers must be unique. You can't assign duplicate IDs. CSS class can be used for binding event handler. Here in snippet I have added a1 class to anchor.

%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

And for binding event handler use .on() method with Event Delegation approach, when generating elements dynamically.

Example

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

In place of document you should use closest static container.

Answer 2

When you click on link .button class event is occurred

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