单击按钮时隐藏窗体
hide a form on button click
我在下面列出了Marionette应用程序和HTML。我想这样做,当按下"处理"按钮时,表单就会从页面上消失。在hideForm方法中,我尝试在单击事件中隐藏表单。在这些尝试中,只有命令"$('.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:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="assets/screen.css">
<title>Simple Demo</title>
</head>
<body>
<div id = "formBox">
</div>
<div id = "listBox">
</div>
<script type="text/template" id="form-template">
<input id = "a" placeholder = "a" autofocus>
<br />
<input id = "b" placeholder = "b">
<br />
<textarea id = "c" placeholder = "c"></textarea>
<br />
<button id = "processInput" >process</button>
</script>
<script type="text/template" id="entries-template">
<thead>
<tr class='header'>
<th>Entry</th>
</tr>
</thead>
<tbody>
</tbody>
</script>
<script type="text/template" id="entry-template">
<td><%- entry %></td>
<td><button class="delete">Delete</button></td>
</script>
<script src="js/lib/jquery.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/lib/backbone.marionette.js"></script>
<script src="js/demo.js"></script>
</body>
如您所见:http://jsfiddle.net/9Vp3A/
按钮似乎得到了一个隐含类型的"提交"。返回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"});
这将隐藏表单,就好像它不存在于代码中一样。
或者(@Makis192解决方案)
$('.form').style.visibility = "hidden";
这将隐藏,但仍然显示空白
相关文章:
- 主干窗体隐藏字段未呈现
- 当屏幕键盘出现在手机中时,窗体会隐藏起来
- 选择单选按钮时显示或隐藏窗体
- 如何隐藏和显示通过窗体填充的表
- 如何从窗体中隐藏选择值
- 访问子窗体的asp代码隐藏中的javascript window.myvariable
- Javascript显示窗体的隐藏变量
- 如何将表行传递到具有所有输入元素的隐藏窗体
- 显示或隐藏窗体元素
- 如何隐藏/取消隐藏窗体
- 如何根据字段名称在SharePoint显示窗体中隐藏字段(jQuery)
- Javascript隐藏Jquery窗体
- 如何在模式隐藏或关闭时重置窗体
- 窗体-通过在select标记中选择一个选项来显示隐藏字段
- django窗体向导.使用Javascript隐藏/显示表单字段
- 优化javascript显示/隐藏单选窗体选项
- 单击按钮时隐藏窗体
- 使用单选框显示和隐藏不同的窗体
- 在依赖于另一个字段选择的窗体中隐藏表的某个部分
- . getelementbyid().值在窗体's隐藏字段asp.net网页中不起作用