Uncaught SyntaxError：运行此代码时无效或意外的令牌

Question

嗨，我尝试获取Uncaught SyntaxError：当我单击“编辑”或“删除”按钮时，无效或意外的令牌可能有人告诉我此代码有什么问题！ 我花了3个小时的时间看这段代码，对我来说一切都很好！ 如果您能指出明显的话，那将节省我的感谢！

 for (i = 0; i < response.data.length; i++) { $("#table").append("<tr> <td> " + response.data[i].user_email + " </td> <td> " + response.data[i].booking_number + " </td> <td> " + response.data[i].booking_address + " </td> <td> " + response.data[i].booking_date + " </td> <td> " + response.data[i].booking_message + " </td> <td> " + response.data[i].request_date + " </td> <td> " + response.data[i].chosen_emails_1 + " </td> <td> " + response.data[i].chosen_emails_2 + " </td> <td> " + response.data[i].chosen_emails_3 + " </td> <td> <button onclick='edit(" + response.data[i].user_email + ");'> Edit </button> <br> <button onclick='delete_(" + response.data[i].user_email + ");'> Delete </button> </td> </tr>"); } //to delete delete_ = function(user_email) { alert("inside delete"); }; //to edit edit = function(user_email) { alert("inside edit"); }; 

Answer 1

问题是，当您生成HTML时，结果是

<button onclick='edit(test@gmail.com);'>

并且函数内部的文本应在这样的引号内

<button onclick='edit("test@gmail.com");'>

解决这个用途

"<button onclick=delete_('" + response.data[i].user_email + "');>"

代替

"<button onclick='delete_(" + response.data[i].user_email + ");'>

在连接字符串时，在两个按钮中都可以

Answer 2

由于您是动态添加html元素，并且在首次加载页面时无法在dom中访问它们，因此，我认为您可以像这样附加事件；

//to delete
$(document).on("click", ".delete-btn", function() {
  alert($(this).val());
});

//to edit
$(document).on("click", ".edit-btn", function() {
  alert($(this).val());
});

这是一个工作示例。 我将适当的类添加到它们各自的按钮中，并将数据放置在value属性内。 运行该代码段；

 $(document).ready(function() { var response = { data: [{ booking_number: "test A", user_email: "test A", booking_address: "test A" }] }; for (i = 0; i < response.data.length; i++) { $("#table tbody").append("<tr>" + "<td>" + response.data[i].user_email + "</td>" + "<td>" + response.data[i].booking_number + "</td>" + "<td> " + response.data[i].booking_address + " </td>" + "<td> " + response.data[i].booking_date + " </td>" + "<td> " + response.data[i].booking_message + " </td>" + "<td> " + response.data[i].request_date + " </td>" + "<td> " + response.data[i].chosen_emails_1 + " </td>" + "<td> " + response.data[i].chosen_emails_2 + " </td>" + "<td> " + response.data[i].chosen_emails_3 + " </td>" + "<td> <button class='edit-btn' value='" + response.data[i].user_email + "'>Edit</button><button class='delete-btn' value='" + response.data[i].user_email + "'> Delete </button></td>" + "</tr>"); } //to delete $(document).on("click", ".delete-btn", function() { alert($(this).val()); }); //to edit $(document).on("click", ".edit-btn", function() { alert($(this).val()); }); }) 

 #table { border-collapse: collapse; } #table tr td { border: 1px solid rgba(0, 0, 0, 0.1); padding: 0px 4px 0px 4px; } #table tr td button { display: inline-block; margin-right: 4px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <tbody></tbody> </table>