jq如何解决无法选择动态插入的节点？

Question

后台菜单是ajax获取后解析json生成的html片段然后html()添加进去的，jq似乎无法选择这些新增的节点，请问该如何解决？

function _tree(rows)
        {
            var str = '';
            $.each(rows, function(i, e) {
                var li_class = typeof(e.children) == 'undefined' ? '' : 'treeview';
                var allow_a = typeof(e.children) == 'undefined' ? 'data-menuid='+e.id : '';
                var menu_icon = e.menu_icon == '' ? 'link' : e.menu_icon;
                var menu_link = typeof(e.children) == 'undefined' ? e.menu_link : '#';
                var container =     typeof(e.children) == 'undefined'
                                    ?   ''
                                    :   '<span class="pull-right-container">'+
                                        '<i class="fa fa-angle-left pull-right"></i>'+
                                        '</span>';
                str += '<li class="'+li_class+'"><a '+allow_a+' href="'+menu_link+'"><i class="fa fa-'+menu_icon+'"></i> <span>'+e.menu_name+'</span>'+container+'</a>';
                if (typeof(e.children) != 'undefined') {
                    str += '<ul class="treeview-menu"'+'>';
                    str += _tree(e.children);
                    str += '</ul>';
                }

                str += '</li>';
            });

            return str;
        }

 $(function() {
        _get({type: 'json'}, Japi.menuGet, function(respond) {
            if (respond.code.errcode == Japi.SUCCESS_STATUS) {
                $('#admin-menu').html(_tree(respond.data));
            }
        });

当我选择节点的时候

var n = $('#admin-menu [data-menuid='+nowId+']');
console.log(n);

似乎找不到这个节点，请问问题处在什么地方

Answer 1

估计可能是，因为菜单的生成是异步的，当你取菜单的时候还没有生成菜单。你可以试着打开调试工具，直接在控制台手动输入查找菜单的方法看一下。

Answer 2

需要设置同步
建议将 _get({type: 'json'}改为$.ajax({})

 $.ajax({  
        type : "get",  
        url : "",  
        data : "",
        dataType:"json",
        async : false, //关键代码 同步执行 
        success : function(respond){  
            if (respond.code.errcode == Japi.SUCCESS_STATUS) {
                   $('#admin-menu').html(_tree(respond.data));
            }
        }  
    });

Answer 3

信息不全。但是我推测你是先获取的元素后发送的请求。应该在做完元素添加之后重新获取。

Answer 4

估计是你绑定菜单点击事件的方式不正确!

Answer 5

是不是判断反了？
var allow_a = typeof(e.children) == 'undefined' ? 'data-menuid='+e.id : '';

Answer 6

打个断点，单步执行一下，在控制台查看 menu.id 的取值，看看要查找的 dom 节点是否存在。这算是 debug 能力吧

Answer 7

动态插入节点选择 因为还没有生成所以发现不了
解决办法
$(document).on('click','#admin-menu [data-menuid='+nowId+']',function(e){

console.log(e)

})

Answer 8

我经常用一个老方法

$(父级).delegate('元素本身','click',function(){
    console.log($(this))
})

Answer 9

事件的捕获 绑事件的时候元素还未生成所以绑定失败 可以绑到父级元素上 比如

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

如果想要给li绑事件但是li之后可能还会动态添加进去，那么最好就是给ul绑定事件 然后可以根据target去获取到底点击了哪一个li

说的比较简单 具体的网上很多例子