通过js动态填充的按钮标签不响应js中的对它的onclick事件解决

问题:现在有一颗树形菜单(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();
                }
            }
        });
    }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值