Как правильно получить идентификатор элемента на основе имени класса?

Question

Я пытаюсь получить id, который генерируется динамически. Я использую имя класса для доступа к нему. Если я нажимаю на элемент td один раз, оповещение не появляется. Но когда я нажму дважды, я получу предупреждение (впервые). Если я нажимаю на второй пункт, я получаю предупреждение два раза. Если на третьем я получу это три раза и так далее. В чем ошибка?

Мой код JavaScript:

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

Мой код HTML-колбы:

   <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

Каждый раз, когда вы нажимаете на td, вы присоединяете еще одного слушателя. вам нужно сразу прикрепить listner для всех динамически создаваемых элементов.

удалить вызов функции JavaScript в вашей части HTML. и измените свой 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>

Answer 2

Вы вызываете функцию дважды. .click, который вы используете в jquery, уже вызывает функцию, тогда ваш тег a также вызывает функцию JavaScript. Удалить вызов функции из тега