jquery对未来元素绑定事件

jquery给未来元素绑定事件

    //五、渲染页面
    function pri_tags(str){
        var array_merge = str.split(",");//解析数组
        var str = "";
        for(let i=0;i<array_merge.length;i++){
            str += `
                <span>${array_merge[i]}<i class="clo"></i></span>
            `;
        }
        console.log(str);
        $(".pri_tag_show").html(str);
    }

常规绑定时间方式（无效，因为上述的dom树还不存在）

    $(".pri_tag_show span").click(function(){
        console.log(1);
        console.log("dsa");
        $(".pri_tag_show span i").css("display","none");
        $(this).children(".clo").css("display","inline");
    });

    $(".pri_tag_show span").mouseleave(function(){
        $(".pri_tag_show span i").css("display","none");
    });
    

jquery提供on方法对当前元素和未来元素进行绑定

    $(document).on("mouseover",".pri_tag_show span",function(){
        $(".pri_tag_show span i").css("display","none");
        $(this).children(".clo").css("display","inline");
    })

    $(document).on("mouseleave",".pri_tag_show span",function(){
        $(".pri_tag_show span i").css("display","none");
    })

on方法说明：我这里$(document)是指整个dom树未来的当下的都包含，on的形参，第一个是事件名称，鼠标进入和鼠标离开事件，第二个参数是需要绑定的未来元素所在dom树的选择器，第三个事件回调；

官方说明:

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。