问题:现在有一颗树形菜单(jstree),这个菜单最开始是通过js初始化的,现在我对这个树形菜单的某个项做了更改,比如说改名,现在要重新初始化这个树形菜单,第一次初始化的时候菜单能响应点击事件,但是在不刷新页面的情况下重新做初始化后的菜单并不能响应点击事件了。
原因:你应该在动态生成元素的同时也动态生成事件过程,而不是先生成一个子虚乌有的事件来等着元素对号入座。
解决:在重新初始化树形菜单的同时还要为菜单重新绑定点击事件。
function treeInit(){
//把初始化和事件写在一起防止重新初始化菜单后不响应点击事件
$.post("{:url('admin/getdepartment')}", {}, function (data) {
// console.log(data);
$('#treeDemo').jstree({
'plugins': ['types','themes','contextmenu'],
'core' : {
'multiple' : true,
'dblclick_toggle': true,
'data' :data
},
'contextmenu': { // 右键菜单
'items': {
'edit': {
'label': '编辑',
'action': function (){
$('#tree_dialog').modal('show');
}
},
'delete': {
'label': '删除',
'action': function () {
var key = $('#departmentupdateid').val();
$.post("{:url('admin/departmentdel')}",{'did':key},function (data) {
if (typeof data.status == 0) {
layer.msg(data.msg, {icon: 6, time: 500});
}else{
$('#tree').html($(data).find('#tree').html());
// $str="<ul id=\"demo1\">haha</ul>";
// $('#tree_dialog').modal('hide');
// $('#tree').html($str);
treeInit();
}
});
}
},
'new':{
'label': '新建',
'action':function () {
$('#departmentupdatename').val('');
$('#departmentupdateid').val('');
$('#tree_dialog').modal('show');
}
}
}
}
});
});
$('#treeDemo').on("changed.jstree", function (e, data) {
var key_text=data.instance.get_node(data.selected).text;//输出当前选中的区域的名称
var key_id=data.instance.get_node(data.selected).id;//输出当前选中的区域的id
var key_parent=data.instance.get_node(data.selected).parent;//输出当前选中的区域的id
$('#departmentupdatename').val(key_text);
$('#departmentupdateid').val(key_id);
$('#parent').val(key_parent);
//需要判断是否点击的是左键,如果是右键应该不做操作
if(data.event.button==0){
if (key_id != "root") {
$('#user_serach input[name=click_department_key]').val(key_text);
search();
} else {
$('#user_serach input[name=click_role_key]').val('');
$('#user_serach input[name=click_department_key]').val('');
$('#user_serach input[name=key]').val('');
search();
}
}
});
}