今天在遇到这么一个问题:
我在模态框中同时应用了markdown编辑器与datepicker时间选择器,但是每次在点击时间输入框时,markdown编辑器总是会被重新加载,导致模态框跳转回最顶部,因此时间选择框与输入框就处在了分离的位置:
错误方法:
我原本的方法是在button标签属性中实现与模态框的绑定,而在模态框显示时,使用回调函数来执行markdown的初始化函数(因为如果在加载页面时就初始化markdown,则会出现无法输入文字的情况)。代码如下:
//模态框展示时,执行markdown编辑器的初始化
$('#myModal').on('show.bs.modal', function (event) {
initEditor()
})
// datepicker初始化
$('#id_start_date').datepicker({
format: 'yyyy-mm-dd',
startDate: '0',
language: 'zh-CN',
autoclose: true
});
//markdown初始化函数
function initEditor() {
editormd('editor', {
placeholder: '请输入内容',
height: 600,
path: '{% static 'plugins/editor-md/editor.md-master/lib/' %}'
})
}
此处尝试过将datepicker初始化过程封装成函数,与initEditor()一起放入回调函数中,但并没有解决问题。
因此推断是,当点击时间选择框即datepicker初始化时,总是会触发markdown编辑器的初始化,从而使模态框跳转回最顶部。
解决思路:
采用给button按钮绑定click事件的方法,直接在click事件中执行markdown和datepicker的初始化。那么在选择时间时,就不会触发markdown的初始化,问题即可解决。同时markdown也不会再页面框架加载时即初始化,也避免了不兼容导致无法输入的问题。
// 为id为"show_modal"的按钮绑定click事件
$('#show_modal').click(function () {
initEditor();
initDatepicker()
})
function initEditor() {
editormd('editor', {
placeholder: '请输入内容',
height: 600,
path: '{% static 'plugins/editor-md/editor.md-master/lib/' %}'
})
}
把datepicker初始化封装成函数
function initDatepicker() {
$('#id_start_date').datepicker({
format: 'yyyy-mm-dd',
startDate: '0',
language: 'zh-CN',
autoclose: true
});
}