Question

我正在尝试获取动态生成的id。我正在使用一个类名来访问它。如果我单击td项目一次，则没有警报。但是，当我单击两次时，我会收到警报（第一次）。如果单击第二项，则会收到两次警报。如果是第三名，我会三遍，依此类推。有什么错误吗？

我的JavaScript代码：

function myFunction() {
    $('.task0').click(function() {
   var x = $(this).data('id');
    alert(x);
});
}

我的HTML-Flask代码：

   <tbody>
   {% set ns = namespace(num=1) %}
   {% for task in tasklist %}
   <tr>
      <td>{{ ns.num }}</td>
      <td class="task0" data-id="{{ task[0] }}"><a href="javascript:myFunction();" >{{ task[0] }}</a></td>
      {% for i in range(1,task|count) %}
      <td>{{ task[i] }}</td>
      {% endfor %}
   </tr>
   {% set ns.num = ns.num+1 %}
   {% endfor %}
</tbody>

Answer 1

您两次调用该函数。您在jquery中使用的.click已经调用了该函数，然后使a标记也调用了JavaScript函数。从a标签中删除对该函数的调用

Answer 2

每次单击td时，都会附加一个侦听器。您需要一次为所有动态创建的元素附加侦听器。

删除html部分中的javascript函数调用。并按如下所示更改您的JavaScript。

$(document).on(click, '.tasklink', function(e){
    e.preventDefault();
    var x = $(this).parents('td.task0').data('id');
    alert(x);
})


 <tbody>
       {% set ns = namespace(num=1) %}
       {% for task in tasklist %}
       <tr>
          <td>{{ ns.num }}</td>
          <td class="task0" data-id="{{ task[0] }}"><a class="tasklink" href="#" >{{ task[0] }}</a></td>
          {% for i in range(1,task|count) %}
          <td>{{ task[i] }}</td>
          {% endfor %}
       </tr>
       {% set ns.num = ns.num+1 %}
       {% endfor %}
    </tbody>

如何根据类名正确获取元素ID？

2 个答案: