javascript-Bootstrap模式表单将不会与淘汰赛的提交绑定一起提交
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-Bootstrap模式表单将不会与淘汰赛的提交绑定一起提交，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2202字，纯文字阅读大概需要4分钟。
内容图文
我在这里有一个jsFiddle示例：http://jsfiddle.net/vsZhg/
我正在我的引导程序模式内构建一个窗体.问题是,除非用户单击提交输入,否则永远不会执行敲除提交绑定.我怀疑引导程序会阻止执行敲除绑定,但是,我不确定如何解决此问题.
如果您按Enter键,则模式对话框将关闭,并且绑定函数将永远不会执行(结果,我无法发送数据).但是,如果您单击了Submit输入,则绑定将按预期执行.
以下是相关代码：
脚本：
function ArticleViewModel() {
var self = this;
self.SendArticleName = ko.observable('');
self.SendArticleEmail = ko.observable('');
self.SendArticle = function() {
$.ajax('http://example.com', {
data: ko.toJSON({ name: self.SendArticleName, email: self.SendArticleEmail }),
type: "post", contentType: "application/json",
success: function(result) {
$('#share-modal').modal('hide');
}
});
};
}
var articleViewModel = new ArticleViewModel();
ko.applyBindings(articleViewModel);
HTML：
<div id="share" class="row article-section">
<div class="span12">
<h4>Share</h4>
<a class="btn btn-large" role="button" data-toggle="modal" href="#share-modal"><i class="icon-envelope"></i> Share This Article</a>
<div id="share-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form class="form-horizontal" data-bind="submit: SendArticle" class="modal-form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Share</h3>
</div>
<div class="modal-body">
<p>Who would you like to send the article to?</p>
<br />
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" placeholder="Name" data-bind="value: SendArticleName" />
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" placeholder="Email" data-bind="value: SendArticleEmail" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<input type="submit" value="Send" />
</div>
</form>
</div>
</div>
</div>
解决方法:
原因是表单中的第一个按钮始终是默认按钮,因此当您按下Enter键时,将单击您的“取消”按钮.
这个SO问题提出了一些解决方法：
Multiple submit buttons on HTML form – designate one button as default
内容总结
以上是互联网集市为您收集整理的javascript-Bootstrap模式表单将不会与淘汰赛的提交绑定一起提交全部内容，希望文章能够帮你解决javascript-Bootstrap模式表单将不会与淘汰赛的提交绑定一起提交所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。