表单提交时未调用Javascript闭包函数

这使我感到困惑。我有一个文本框。您输入一些内容，然后按enter键。Javascript以单独的形式创建只读输入元素。文本输入框旁边是用于删除它们的按钮。表单底部还有一个提交按钮，用于提交所有只读文本输入

由于单击表单内部的按钮将提交表单（我只想删除包含按钮及其相应文本输入的父div），因此表单提交时会调用一个函数。此功能确定按下了哪种类型的按钮（删除或提交），并相应地执行操作

问题来了。当按下移除按钮时，永远不会调用函数

destinations.enter

。我解决这个问题的方法是创建一个名为

submitDestinations

的全局函数，该函数复制

目的地的功能。如果调用此函数，则一切都会顺利进行

是否有人知道为什么
目的地。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>

目标的实现中存在错误。enter（）。它调用remove（）来删除按钮，但名称“remove”未绑定在定义destinations.enter（）的范围内

看起来destinations.remove（）似乎从未在其他地方调用过，因此最简单的修复方法是将其提升为destinations构造函数中的私有函数，而不是将其作为destinations对象上的方法

修改后的版本之所以有效，是因为您已将submitDestinations（）的主体更改为调用destinations.remove（），它绑定在该范围内。
结果表明存在命名冲突。我创建的文本输入的name属性被设置为“destinations”，与我在提交时调用的javascript对象的名称相同。因此，“onsubmit”中的javascript试图引用DOM元素并对其调用enter，而不是引用我的javascript函数。
？这会更容易提供帮助。@Juhana这两个方法似乎都不是在JSFIDLE中调用的。试着用一个简单的例子来说明同样的问题。这将帮助你和其他人了解发生了什么。啊，谢谢。事实证明，这是一个不同的问题，比一个导致我的问题。在我解决了目的地的问题后，这一点就会立即显现出来。
function submitDestinations(form){
    var button = form.submitted;
    if(button.id != 'submitBtn'){
        return destinations.remove(button);
    }else{
        return true;
    }
}

        <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>