Question

当我将ajax部分放入评论时，它的工作正常。我在我的控制台中获取了json数据，但是当我重新启用ajax部分时，整个功能都无法工作，并且触发该功能的按钮被浪费掉了。我得到的错误是：

未捕获的SyntaxError：意外的标识符

function edit_user(email)
{
        element = '<div align="center">';
    element +='<p id="video_upload_heading" style="font-
    size:24px">Change Profile<br><br>Email: <b><i>'+email+'</i>
    </b> </p>';
    element +='<form id="formdata_upload">';
    element += '<input type="text" placeholder="First Name" 
    name="fname" id="fname" class="container" 
    style="color:black; width:300px; height:30px; 
    padding:7px">';
    element += '<br><br><input type="text" placeholder="Last 
    Name" name="lname" id="lname" class="container" 
    style="color:black; width:300px; height:30px;padding:7px">';
    element += '<br><br><input type="date" data-date-inline-
    picker="true" placeholder="Date of Birth" name="dob" 
    id="dob" class="container" style="color:black; width:300px; 
    height:30px; padding:7px">';
    element += '<br><br><input type="text" placeholder="New 
    Password" name="pswd" id="pswd" class="container" 
    style="color:black; width:300px; height:30px; 
    padding:7px">';
    element += '<br><br><input type="hidden" value='+email+' 
    name="email" id="email" class="container" 
    style="color:black; width:300px; height:30px; 
    padding:7px">';
    element += '<br><br><input type="button" id="upload_button" 
    style="color:white; background:orange; width:90px; 
    height:30px;font-size:16px" value="Upload">';
    element += '<br><br></form>'
    element += '<div align="center" id="upload-respose"></div>'
    element += '</div>'

    // Problem code line
    element += '<script>';
    element += '$("#upload_button").on("click",function(){'
        element += 'console.log({email:$("#email").val(), 
    fname:$("#fname").val(), lname:$("#lname").val(), 
    dob:$("#dob").val(),  pswd:$("#pswd").val()})';
        element += '$.post("user_detail_update", 
    {email:$("#email").val(), fname:$("#fname").val(), 
    lname:$("#lname").val(), dob:$("#dob").val(), 
    pswd:$("#pswd").val()}), function(data){'
    element += ' console.log(data);'
        element += '});'
        element += '});</script>'


    $("#response").html(element);
 }

Answer 1

至少有几个问题：

您在字符串文字的中间有一个换行符：

element += '<input type="text" placeholder="First Name" 
name="fname" id="fname" class="container"

JavaScript不允许未转义的换行符。

此：
```
element += '});</script>'
```
</script>结束了您的脚本，即使它位于'中。

相反，要么：
1. 将您的JavaScript移动到外部文件中，因此</script>并不特殊，或
2. 以某种方式打破它;这很常见（请注意反斜杠）：
```
element += '});<\/script>'
```

Answer 2

我建议您使用此HTML和脚本，而不是创建字符串

不再需要委托点击上传按钮，我删除了未使用的表单标签

$(function() {
  $("#upload_button").on("click", function(e) {
    $.post("user_detail_update", {
        email: $("#email").val(),
        fname: $("#fname").val(),
        lname: $("#lname").val(),
        dob: $("#dob").val(),
        pswd: $("#pswd").val()
      },
      function(data) {
        console.log(data);
      });
  });

  function edit_user(email) {
    $("#emailVal").text(email);
    $("#email").val(email);
    $("#formdata_upload").show();
  }

  $("#showUpload").on("click", function() {
    edit_user($(this).data("email"));
  });
});

#formdata_upload {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="showUpload" data-email="x@y.com">Test</button>
<div align="center" id="formdata_upload">
  <p id="video_upload_heading" style="font-size:24px">Change Profile Email: <b><i id="emailVal"></i></b></p>
  <input type="text" placeholder="First Name" name="fname" id="fname" class="container" style="color:black; width:300px; height:30px; padding:7px">
  <br><br><input type="text" placeholder="Last Name" name="lname" id="lname" class="container" style="color:black; width:300px; height:30px;padding:7px">
  <br><br><input type="date" data-date-inline-picker="true" placeholder="Date of Birth" name="dob" id="dob" class="container" style="color:black; width:300px; height:30px; padding:7px">
  <br><br><input type="text" placeholder="New Password" name="pswd" id="pswd" class="container" style="color:black; width:300px; height:30px; padding:7px">
  <br><br><input type="hidden" value='' name="email" id="email" class="container" style="color:black; width:300px; height:30px; padding:7px">
  <br><br><input type="button" id="upload_button" style="color:white; background:orange; width:90px; height:30px;font-size:16px" value="Upload">
  <br><br>
  <div align="center" id="upload-respose"></div>
</div>

未捕获的SyntaxError：意外的标识符;我不明白为什么

2 个答案: