我目前正在使用Twitter Bootstrap模态组件,我有一个问题,我在使用data-remote属性远程加载的内容中的输入字段上使用jquery验证插件.
因为在遍及dom的jquery验证之后加载了内容,所以对于新加载的元素不会进行验证.
我有一个解决方案,我修改bootstrap.js(模态类),见下文.
var Modal = function (element, options) {
this.options = options
this.$element = $(element)
.delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
//this.options.remote && this.$element.find('.modal-body').load(this.options.remote)
this.options.remote && this.$element.find('.modal-body').load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded')
}, this)) //my additions
}
Run Code Online (Sandbox Code Playgroud)
我在加载外部html片段的调用中触发'loaded'事件.
我已经连接了这个事件,我在新加载的元素上调用验证.
$('#myModal').on('loaded', function () {
$.validator.unobtrusive.parse($(this));
});
Run Code Online (Sandbox Code Playgroud)
我的问题是我必须修改bootstrap.js才能实现这一点,有没有办法让我在外部工作而不修改bootstrap.js?有没有办法访问页面上的模态对象并将'loaded'事件附加到它?我想在外部脚本或页面内执行此操作,因此我不需要担心引导版本.
javascript jquery-validate unobtrusive-validation asp.net-mvc-4 twitter-bootstrap
javascript ×1