Edit Question - KnowledgeHub

Title Body

I'm using .submit() to detect when a form is submitted, but instead of performing its attached function, it's refreshing the page. I'm building a tool for drawing family tree diagrams (using nested lists) at http://chris-armstrong.com/familytree . To add a descendent, you turn controls on, and it adds <li class="add_member">+</li> to each <ul> (or generation). When you click on an <li class="add_member">+</li> element, it replaces the + with an <form class="add_member> consisting of an <input> and a <submit> button. I've then used $("form.add_member").submit() to detect when the submit button is clicked, and it should then replace the form with the contents of the <input> , however at this point it just refreshes the page (and adds a ? to the URL). Any ideas what I'm doing wrong? I've attached the whole function below. function addAddListeners() { $('li.add_member').click(function(){ //create input form $(this).html("<form class='add_member'><input id='fn_' placeholder='Name' required autofocus /><button type='submit'>Add</button></form>") //listen for input form submission $("form.add_member").submit(function(){ //if input form isn't blank, create new li element with content of form, else go back to the add_member li if($('form.add_member').val()) { $(this).replaceWith('<li><span class="vcard" title="Click to edit this members details"><span class="edit fn">'+$('input#fn_').val()+'</span></span><ul><li class="add_member">+</li></ul></li><li class="add_m

Tags (comma-separated) Cancel