Uncaught SyntaxError: Unerwarteter Bezeichner; Ich verstehe nicht, warum

Question

Wann immer ich den Ajax Teil in Kommentare setze, funktioniert es gut. Ich bekomme die JSON-Daten in meiner Konsole, aber in dem Moment, in dem ich den AJAX-Teil wieder einsetze, funktioniert die gesamte Funktion nicht und der Knopf, der die Funktion auslöst, wird verschwendet. Der Fehler, die ich bekommen ist:

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

Ich schlage vor, Sie HTML und Script haben stattdessen einen String

Es schaffen ist nicht mehr notwendig, den Klick auf delegieren die Upload-Button und ich entfernte die Formular-Tags, die verwendet werden, nicht

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

Es gibt mindestens ein paar Probleme:

1. Sie einen Zeilenumbruch in der Mitte eines Strings haben wörtliche:

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

   JavaScript erlaubt keine unausgeglichenen Zeilenumbrüche.

2. Dieses:

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

   Das </script> Skriptes, auch wenn es in ' ist.

   Stattdessen entweder:

   1. sie JavaScript in eine externe Datei verschieben, so </script> nicht speziell ist, oder

   2. brechen, bis irgendwie; das ist nicht unüblich (die Backslash beachten):

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