当在文本输入元素上按下回车键时，按钮的功能总是被调用

Question

此代码表示一个 html 标记，用户可以在其中向 her/his 配置文件添加一个或多个 phone。因此，我使用 backbone 添加文本字段，用户可以在其中指定它们。

<form method="post" class="form-horizontal" action="..">

   <!-- Here I have another text input controls -->

    <!-- START: backbone view -->
    <div id="phones">
        <div class="phones-container">
            <!-- New phone template [label, text input] -->      
        </div>

        <!-- Add phone template button -->
        <button id="btn-add-phone">Add another phone</button>
    </div>
    <!-- END: backbone view -->
</form>

phone 模板如下所示：

<div class="form-group tpl-phone">
    <label class="">Other:</label>
    <div class="col-sm-8 col-lg-7 controls">
        <input value="" type="tel" class="reference" name="reference[]" >
    </div>
</div>

在 backbone 中，我有一个向视图添加新 phone 模板的函数。

Notice that... the backbone view is just a portion of the form.

var PhoneEditorView = Backbone.View.extend({
    el: '#phones',
    events: {
        "click #btn-add-phone": "onAddPhoneTemplate",
        "keyup .reference": "onTypingReference"
    },

    initialize: function (options) {
        _.bindAll(this, 'onAddPhoneTemplate', 'onTypingReference', 'render');
        this.model = new PhoneEditor(options);
        this.render();
    },

    onAddPhoneTemplate: function(event){
        event && event.preventDefault(); //prevents submit form 
        console.log('onAddPhoneTemplate()');
        var $template = $('.tpl-phone').clone().removeClass('tpl-phone');

        $('.phones-container').append($template);
    }, 

    onTypingReference: function(event){
        event && event.preventDefault(); 
        if(event.which == 13){
            console.log('enter key');
        }
    },

    render: function(){
    }
});

有什么问题？ 如果用户在任何文本字段按 Enter 键，无论它在视图范围内还是视图范围外, 由于某种原因 onAddPhoneTemplate() 函数被再次调用并且另一个 phone 的模板被添加到视图中。

Enter 键的预期行为是什么都不做，控制台的输出：
```
enter key
```
然而，在按下回车键后，我进入了控制台：
```
onAddPhoneTemplate()
enter key
```

Answer 1

将您的按钮更改为 type=button。

除非另有说明，否则按钮默认为 type=submit，因此当放置在表单中时，它将触发表单提交。

当表单中存在type=submit时，点击enter也会触发表单提交

<button type="button" id="btn-add-phone">Add another phone</button>

当在文本输入元素上按下回车键时，按钮的功能总是被调用

Button's function always called when enter key is pressed at text input element

html

javascript

jquery

backbone.js