未捕獲的SyntaxError：意外的標識符;我不明白爲什麼

Question

當我把ajax部分放在註釋中時，它工作得很好。我在控制檯中獲取了json數據，但是當我將ajax部件放回原位時，整個函數不起作用，並且觸發該函數的按鈕被浪費了。 ，我得到的錯誤是：

Uncaught SyntaxError: Unexpected identifier

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

我建議你有這樣的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>

Answer 2

至少有幾個問題：

1. 你有一個字符串的文字中間換行：

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

   JavaScript不允許非轉換換行符。

2. 此：

   element += '});</script>' 
   

   這</script>結束腳本，即使它是在'。

   相反，無論是：

   1. 將你的JavaScript到外部文件，所以</script>是不是特別的，或

   2. 打破某種程度上;這是常見的（注意反斜線）：

      element += '});<\/script>'