1. 程式人生 > >通過js動態填充的按鈕標籤不響應js中的對它的onclick事件解決

通過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();
                }
            }
        });
    }