Question

此代码表示一个html标记，用户可以在其中添加一个或多个手机到她/他的个人资料中。因此，我使用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>

手机模板如下所示：

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

在骨干网中我有一个功能，可以在视图中添加新的手机模板。

请注意...... 骨干视图只是表单的一部分。

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

问题是什么？如果用户在任何文本字段whterver上按 Enter 键，如果它位于视图范围之内或之外，则由于某种原因{{1}再次调用函数，并将另一个电话的模板添加到视图中。

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

Answer 1

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

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

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

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

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

1 个答案: