javascript - Element added via jquery append does not persist on screen -


i trying make to list app. append list elements task list using append() function

html

<!doctype html> <html>   <title>todo</title>    <head>     <meta charset="utf-8">     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     <script type="text/javascript" src="script.js"></script>      <h2>to list</h2>   </head>    <form name = "taskform">     task: <input type = "text" name = "task" >           <input type = "submit" id = "submit" value = "add">   </form>    <ul class = "list">     <li class = "item"></li>   </ul>  </html> 

script

$(document).ready(function(){   $('input#submit').click(function(){       var newtask = $('input[name=task]').val();       $('.list').append('<li class = "item"' + newtask + '</li>');   }); }); 

when click on submit button, see new item flash on screen second , disappear on own.

why witnessing behavior?

this because submitting form. when form submitted, page automatically begins redirect.

to preserve behavior, return false prevent form being submitted

$(document).ready(function(){   $('input#submit').click(function(){       var newtask = $('input[name=task]').val();       $('.list').append('<li class = "item"' + newtask + '</li>');       return false;   }); }); 

note, can witness change persist. however, depending on needs, may need rearrange flow if wish submit form, yet keep appended changes. can done $.ajax() submitting.


Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -