jQuery form.submit()() का पता लगाने के ताज़ा पेज के बजाय

Question

प्रस्तुत करने मैं .submit उपयोग कर रहा हूँ, लेकिन इसके बजाय अपने संलग्न प्रकार्य के निष्पादन का, यह पृष्ठ ताज़ा है।

मैं http://chris-armstrong.com/familytree पर पारिवारिक पेड़ आरेखों (नेस्टेड सूचियों का उपयोग करके) खींचने के लिए एक उपकरण बना रहा हूं।

एक वंश जोड़ने के लिए, आप नियंत्रण चालू करते हैं, और यह प्रत्येक <ul> (या पीढ़ी) में <li class="add_member">+</li> जोड़ता है।

आप एक <li class="add_member">+</li> तत्व पर क्लिक करते हैं, यह एक <form class="add_member> एक <input> से मिलकर और एक <submit> बटन के साथ + बदल देता है। जब सबमिट बटन क्लिक किया गया है तो पता लगाने के लिए मैंने $("form.add_member").submit() का उपयोग किया है, और यह होना चाहिए और फिर <input> की सामग्री के साथ फ़ॉर्म को प्रतिस्थापित करें, हालांकि इस बिंदु पर यह पृष्ठ को रीफ्रेश करता है (और यूआरएल में जोड़ता है)।

कोई विचार क्या मैं गलत कर रहा हूं? मैंने नीचे पूरा कार्य संलग्न किया है।

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_member">+</li>'); 
         addEditListeners(); 
         addAddListeners(); 
        } else { 
         alert("no change"); 
        $(this).html("+"); 
        } 
       }); 

      }); 
     } 

संपादित करें: वापसी झूठी जोड़ रहा है; पेज रीफ्रेशिंग को रोकता है, लेकिन .submit() से जुड़ा हुआ फ़ंक्शन फायरिंग प्रतीत नहीं होता है, किसी भी विचार क्यों?

Answer 1

1. डिफ़ॉल्ट फ़ॉर्म कार्रवाई होने से रोकने के लिए आपको सबमिट फ़ंक्शन से return false; या event.preventDefault(); की आवश्यकता है।
2. आप प्रतिनिधिमंडल के साथ jQuery on पर गौर करें ताकि आप घटनाओं rebind करने के लिए जब नए तत्व डोम में जुड़ जाते हैं की जरूरत नहीं है चाहिए।

Answer 2

मुझे लगता है कि आपको .submit() के अंत में return false; की आवश्यकता है।

Answer 3

एक वापसी जोड़ें: false; अपने प्रस्तुत कार्य करने के लिए:

$("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; 
      });