Javascript 单击按钮隐藏窗体

我在下面列出了木偶应用程序，下面是HTML。我想这样做，当按下“处理”按钮时，表单将从页面中消失。在hideForm方法中，我尝试了一些在click事件中隐藏表单的东西。在这些尝试中，只有此命令“$（'.form'）.hide（）”有效。问题在于，它只是部分起作用，因为一旦单击按钮，表单就会消失，但随后会立即重新出现。最终，我想知道我做错了什么，但是如果有人能告诉我为什么我在hideform方法中使用的其他方法没有任何作用，我希望得到一个解释

MyApp = new Backbone.Marionette.Application();

MyApp.addRegions({
formBox : '#formBox',
listBox : '#listBox'
});

Entry = Backbone.Model.extend({
defaults: {
    entry : 'Blank'
},
});

EntryList = Backbone.Collection.extend({
model: Entry
});

FormView = Backbone.Marionette.ItemView.extend({
tagName: 'form',
template: '#form-template',
className: 'form',

events:{
    'click #processInput' : 'hideForm'
},

hideForm : function(){
    //$('.form').css('display','none')
    //document.getElementById("form").style.display="none";
    $('.form').hide();
}

});

EntryView = Backbone.Marionette.ItemView.extend({
tagName: 'tr',
template: '#entry-template',
className: 'entry',

events: {
    'click .delete' : 'destroy'
},

destroy : function()
{
    this.model.destroy();
}
});

EntriesView = Backbone.Marionette.CompositeView.extend({
tagName: 'table',
template: '#entries-template',
itemView: EntryView,

appendHtml: function(collectionView, itemView){
    collectionView.$('tbody').append(itemView.el);      
}
});

MyApp.addInitializer(function(test){
    var entriesView = new EntriesView({
    collection: test.entry
    });

    var formView = new FormView();
    MyApp.formBox.show(formView); 
    MyApp.listBox.show(entriesView);
});

$(document).ready(function(){
    var ents = new EntryList([
    new Entry({ entry: 'test a' }),
    new Entry({ entry: 'test b' }),
    new Entry({ entry: 'test c' })
]);

MyApp.start({entry: ents});

}))

HTML:

简单演示






过程
进入
删除

如您所见：

该按钮似乎得到了一个隐式类型的“提交”。返回false修复了这个问题

hideForm : function(){
    //$('.form').css('display','none')
    //document.getElementById("form").style.display="none";
    //$('.form').hide();
    this.$el.hide(); // This is cached on the object. Best to use it.
    return false;
}

尝试：

这将隐藏表单，就像它在代码中不存在一样

或（@Makis192解决方案）

---

它将隐藏但仍然显示空白空间

您是否尝试了<代码> $EL .HIDED（）/代码>？它具有与“$”（“表单”）相同的效果。HIDE（）“它消失了，而不是立即重新出现另一个可能的解决方案是转到FraveVIEW，并将TAG名称改为“div”，而不是“Frm”，那么您就不需要返回false。但这条路是行得通的

hideForm : function(){
    //$('.form').css('display','none')
    //document.getElementById("form").style.display="none";
    //$('.form').hide();
    this.$el.hide(); // This is cached on the object. Best to use it.
    return false;
}

$('.form').css({"display":"none"});

$('.form').style.visibility = "hidden";