javascript - 如何修复 EJS 模板中的可点击 jQuery 行

Question

我是一名初学者 Web 开发人员，我正在尝试创建一个包含名义员工信息表的 EJS 应用程序。我希望表格在选择行或员工时显示更多信息。我尝试使用基本的 jQuery 可点击行解决方案，但没有显示我指定的 url(用于测试目的)。你能帮帮我吗？

-- index.ejs--

<tbody>
    <% newEmployee.forEach(function(employee) { %>
        <tr class="clickable-row" data-url="https://www.google.com/">
            <td><%= employee.name %></td>
            <td><%= employee.title %></td>
            <td><%= employee.email %></td>
        </tr>
     <% }); %>
</tbody>

-- 脚本.ejs --

<script>
jQuery(document).ready(function($) {
  $('.clickable-row').click(function() {
    window.location = $(this).data("url");
  });
});
</script>

Answer 1

使用 $(selector).on( events [, selector ] [, data ], handler ) 代替 click() 因为行是动态生成的。

    var employee = [{ name: 'abc', title: 'pqr', email: 'a@b.c' }, { name: 'abc', title: 'pqr', email: 'a@b.c'}];

         var tbody=$('<tbody/>');
      $.each(employee,function(i,e){
          var tr = $('<tr data-url="https://www.google.com/"></tr>').addClass('clickable-row');
            tr.append('<td>'+e.name+'<td/>');
            tr.append('<td>'+e.title+'<td/>');
            tr.append('<td>'+e.email+'<td/>');
            tbody.append(tr);
        });
        $('table').append(tbody);

        $(document).ready(function () {
            $('.clickable-row').on('click', function () {
                var url = $(this).data('url');
                window.location = url;
            });

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border:1px solid black"></table>