Question

我正在尝试在html模板文件上使用 bottle 显示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

它根据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代码来显示链接上的文本，即。单击 {{col}} 时的值

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

现在问题是，当我点击任何超链接时，JS显示警报窗口中的 Testbatch1 。

我也试过下面的代码，但仍然提供相同的输出

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

有人可以建议我如何获取这种动态生成的锚标签的超链接文本吗？我的目的是在单击时读取超链接的文本并发送回我的python代码，我将使用它作为sql查询的参数来呈现其他输出。

Answer 1

因为标识符必须是唯一的。您无法分配重复的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

对于绑定事件处理程序，使用.on()方法和Event Delegation方法，动态生成元素。

实施例

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

代替document，你应该使用最近的静态容器。

Answer 2

当您点击链接.button类事件发生时

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

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

2 个答案: