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
Post a Comment