jQuery form.submit() refreshing page instead of submitting
- You need to
return false;
orevent.preventDefault();
from the submit function to prevent the default form action from happening. - You should look into jQuery
on
with delegation so you don't have to rebind events when new elements are added to the DOM.
Add a return: false; to your submit function:
$("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_member">+</li>'); addEditListeners(); addAddListeners(); } else { alert("no change"); $(this).html("+"); } }); return false; });
I think you need to return false;
at the end of your .submit()
.