表单未提交Javascript关闭功能提交

Question

这让我感到困惑。我有一个文本框。你输入一些东西，然后按回车。 Javascript以单独的形式创建一个只读输入元素。文本输入框旁边是用于删除它们的按钮。该表单底部还有一个提交按钮，用于提交所有只读文本输入。由于单击表单中的按钮将提交表单（并且我只想移除包含按钮及其相应文本输入的父div），当表单提交时会调用一个函数。该功能决定按下哪种类型的按钮（移除或提交）并相应地执行操作。

问题来了。当按下删除按钮时，功能destinations.enter从不被调用。我所做的解决这个问题的方法是创建一个名为submitDestinations的全局函数，该函数复制destinations.enter的功能。如果调用这个函数，一切都会顺利进行。

有没有人有一个想法，为什么destinations.enter不会运行提交，但submitDestinations会？我想相信它与闭包有关，因为函数范围似乎是两个函数之间的唯一区别。不过，这是我第一次使用闭包，而我对它们的了解有限。

的Javascript：

var destinations = (function(){ 
    var max_destinations = 7; 
    var counter = 0; 

    function increment(){ 
     counter += 1; 
     if(counter > max_destinations){ 
      throw 'Too many destinations. (Max 7)' 
     } 
    } 
    function decrement(){ 
     counter += 0; 
     if(counter < 0){ 
      alert('Cannot have less than 0 destinations..') 
      throw 'Too few destinations. Get out of the console!' 
     } 
    } 
    return { 
     add : function(form){ 
      try{ 
       var formInput = form.elements[0]; 
       var destination = formInput.value; 
       // Dont do anything if the input is empty 
       if(destination == ""){ 
        return false; 
       }else{ 
        // increment the destinations counter 
        increment(); 
       } 
      }catch(err){ 
       alert(err); 
       return false; 
      } 
      // add the text value to a visual element 
      var elem = document.createElement('div'); 
      elem.setAttribute('class','destination'); 
      // create the input 
      var input = document.createElement('input'); 
      input.setAttribute('id','dest'+String(counter)); 
      input.setAttribute('class','destinationText'); 
      input.setAttribute('style','border: none'); 
      input.setAttribute('name','destinations'); 
      input.setAttribute('readonly','readonly'); 
      input.setAttribute('value',destination); 
      // create the remove button 
      var button = document.createElement('button'); 
      button.setAttribute('onclick','this.form.submitted=this;');//'return destinations.remove(this);'); 
      button.setAttribute('class','removeButton') 
      button.setAttribute('id','but'+String(counter)) 
      var buttonText = document.createTextNode('Remove'); 
      button.appendChild(buttonText); 
      // add the elements to the div 
      elem.appendChild(input); 
      elem.appendChild(button); 

      var parent = document.getElementById('destinationsDiv'); 
      parent.appendChild(elem); 
      // clear the input box 
      formInput.value = ''; 
      return false; 
     }, 
     enter : function(form){ 
      alert('hi') 
      var button = form.submitted; 
      if(button.id != 'submitBtn'){ 
       return remove(button); 
      }else{ 
       return true; 
      } 
      return false; 
     }, 
     remove : function(button){ 
      try{ 
       decrement(); 
      }catch(err){ 
       // do not allow less than 0 counter 
       alert(err); 
       return false; 
      } 
      // remove the button's parent div altogether 
      var toDelete = button.parentNode; 
      toDelete.parentNode.removeChild(toDelete); 
      return false; 
     } 

    } 
})(); 

和HTML：

 <div> 
      <form id='hi' onsubmit="return destinations.add(this);"> 
       <input type="text" value="" /> 
      </form> 
      <!--form id='submitDiv' method="post" onsubmit="alert(this.submitted);return submitDestinations(this);"--> 
      <form id='submitDiv' method="post" onsubmit="alert(this.submitted);return destinations.enter(this);"> 
       <div id='destinationsDiv'> 
        <div> 
         <input id="dest1" class="destinationText" style="border: none" name="destinations" readonly="readonly" value="aadasd" \> 
         <button onclick="this.form.submitted=this;" class="removeButton" id="but1" \></button> 
        </div> 
        <div> 
         <input id="dest2" class="destinationText" style="border: none" name="destinations" readonly="readonly" value="Hi Stackoverflow" \> 
         <button onclick="this.form.submitted=this;" class="removeButton" id="but2" \></button> 
        </div> 
       </div> 
       <input type="submit" id='submitBtn' onclick="this.form.submitted=this;"/> 
      </form> 
     </div> 

一切工作正常，如果我添加以下JavaScript函数来在全球范围内，并调用它来代替。这并不完全一样的东西destinations.enter

function submitDestinations(form){ 
    var button = form.submitted; 
    if(button.id != 'submitBtn'){ 
     return destinations.remove(button); 
    }else{ 
     return true; 
    } 
} 

所有我的HTML改变是呼吁方法提交：

 <div> 
      <form id='hi' onsubmit="return destinations.add(this);"> 
       <input type="text" value="" /> 
      </form> 
      <form id='submitDiv' method="post" onsubmit="alert(this.submitted);return submitDestinations(this);"> 
      <!--form id='submitDiv' method="post" onsubmit="alert(this.submitted);return destinations.enter(this);"--> 
       <div id='destinationsDiv'> 
        <div> 
         <input id="dest1" class="destinationText" style="border: none" name="destinations" readonly="readonly" value="aadasd" \> 
         <button onclick="this.form.submitted=this;" class="removeButton" id="but1" \></button> 
        </div> 
        <div> 
         <input id="dest2" class="destinationText" style="border: none" name="destinations" readonly="readonly" value="Hi Stackoverflow" \> 
         <button onclick="this.form.submitted=this;" class="removeButton" id="but2" \></button> 
        </div> 
       </div> 
       <input type="submit" id='submitBtn' onclick="this.form.submitted=this;"/> 
      </form> 
     </div> 

Answer 1

事实证明存在命名冲突。我创建的文本输入的名称属性被设置为“目的地”，与我提交时调用的JavaScript对象的名称相同。因此，“onsubmit”中的javascript试图引用DOM元素并调用它，而不是引用我的javascript函数。

Answer 2

有一个在destinations.enter执行错误（） 。它调用remove（）来移除按钮，但名称'remove'未在定义destinations.enter（）的作用域中绑定。

看起来好像destinations.remove（）从来没有在其他地方调用过，因此最简单的修复方法就是将它移动到目标构造函数中的私有函数，而不是将其作为目标对象上的方法。

修改后的版本可以正常工作，因为您已更改submitDestinations（）的主体来调用位于该范围内的destinations.remove（）。