Layui左侧导航栏动态绑定点击事件（失效和解决方法）

1.具体的需求是根据后台传递来的数据，动态加载左侧导航栏

2.加载完成后，通过绑定点击事件，进行具体业务操作

(1)首先尝试使用layui.element自带的on方法进行绑定

    element.on("nav(nav)", function (data) {
       console.log(data);
       ....

    });

因为我们的具体想法是点击后，通过获取我们动态添加的标签中的属性值进行页面跳转，所以我们需要获取到动态添加的数据

而上述写法是可以获取data的，但是存在一个问题，就是这个方法与jquery版本有关，我在使用jquery的3.3.1版本的时候，通过console.log(data)获取到的数据是一个诸如$.fn.init()这种形式的数据，数据繁琐

无法通过标签获取具体的数据，于是我尝试更换jquery版本为3.0.0版本，获取到的console,.log(data)如下

我们发现多了一个属性值context，而打开context后，发现数据都在下面，比较容易获取

（2）但是上述的方法太过于繁琐，不够清晰，于是我尝试通过选择器，进行事件绑定的方法获取属性值，因为上面的element.on方法获取到的数据太过于繁琐，而且字段还是太多，于是改变如下

(3)这是左侧还未渲染数据时候的基本骨架

直接通过jquery.click()方法是不行的，因为数据是动态绑定的，所以在这之后用click方法是获取不到的

（4）于是尝试使用on方法进行绑定

      $(".leftSide-navigation").on("click",function () {
             console.log($(this).attr("navigationurl"));
       });

发现绑定不上，查看文档说明，知，这种是对待已经加载的元素生效，所以是不行的

(5)于是换成下述的方法

   $("body").on("click", '.leftSide-navigation', function () {
        console.log($(this).attr("navigationurl"));
        console.log($(this).attr("id"));
    });

通过上面这种绑定，就可以正确获取了，从父级进行降级绑定，当然也不一定就是body根节点，只要是其已经存在的父节点就可以，比如.leftSide-navigation还有一个父节点.layui-nav-tree 那么前面的body也可以换成.layui-nav-tree

注意前面的.layui-nav-tree是本身就加载完的，而.leftSize-navigation是动态添加代码后插入的属性。

3...好坑啊，到最后发现，其实element.on底层用的就是上面的第二个jquery的on绑定，所以直接调用属性即可~~~

  element.on("nav(nav)", function () {
        console.log($(this).attr("navigationurl"));
        console.log($(this).attr("id"));
    });