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>

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

2 个答案: