Javascript 如何修复EJS模板中可单击的jQuery行

我是一名Web开发新手，我试图创建一个EJS应用程序，其中包含一个员工信息表。我希望表格在选择行或员工时显示更多信息。我尝试了一个基本的jQuery可点击行解决方案，但是没有显示我指定的url（用于测试目的）。你能帮帮我吗

--index.ejs--

--scripts.ejs--

jQuery（文档）.ready（函数（$）{
$（'.clickable行'）。单击（函数（）{
window.location=$（this.data（“url”）；
});
});

使用$（选择器）。在（事件[，选择器][，数据]，处理程序）上使用而不是单击（），因为行是动态生成的

var employee=[{name:'abc'，title:'pqr'，email:'a@b.c“}，{姓名：'abc'，标题：'pqr'，电子邮件：'a@b.c'}];
var tbody=$（''）；
$。每个（员工、职能部门（即）{
var tr=$（''）.addClass（'clickable-row'）；
tr.append（“”+e.name+“”）；
tr.append（“”+e.title+“”）；
tr.append（“”+e.email+“”）；
tbody.append（tr）；
});
$（'table'）。追加（tbody）；
$（文档）.ready（函数（）{
$（'.clickable行'）。在（'单击'，函数（）{
var url=$（this.data（'url'）；
window.location=url；
});
});


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

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