动态创建元素的绑定事件

最近做项目时遇到一个问题，由于列表的数据是从后台获取并渲染到页面的，因此在给它绑定一个点击事件后，触发没有任何效果。

一.出现的原因

通过对页面元素的输出来了解代码的执行先后：

 function getseed() {
    console.log(1)
    var str="";
    axios.get(apiurl+"/ishop-user/seed/getAllForSelect")
        .then((res)=>{
             var SeedList=res.data.extend.seeds;
             SeedList.forEach((ele,index)=>{
                str+=`<div class="chooserootboxitem">
                           <img src=${ele.spic0} alt="">
                           <div class="chooserootboxitem_word">${ele.sname}</div>
                      </div>`;
             });
             $(".chooserootbox").html(str);
             console.log(2)
         })
         .catch(function (error) {
            console.log(error);
         });
}
getseed();   //执行上面的函数

//点击选取种子
console.log($(".chooserootboxitem"));
$(".chooserootboxitem").on("click",function () {
    $(this).siblings().children(".chooserootboxitem_word").removeClass('onactive');
    $(this).children(".chooserootboxitem_word").addClass('onactive');
})
复制代码

执行结果：

我们可以看到当需要的元素还没有被插入时，选择器只选择了页面中已经存在的元素来进行事件的绑定，所以事先没有存在的元素是绑定不了事件的。因此点击我们动态创建的元素不会触发点击事件。

二.解决方案

利用on()事件绑定：$("selector_parent").on(events,[selector],fn),selector选中的元素是需求中要点击的目标，selector_parent是点击目标元素的父元素。

function getseed() {
    console.log(1)
    var str="";
    axios.get(apiurl+"/ishop-user/seed/getAllForSelect")
        .then((res)=>{
             var SeedList=res.data.extend.seeds;
             SeedList.forEach((ele,index)=>{
                str+=`<div class="chooserootboxitem">
                           <img src=${ele.spic0} alt="">
                           <div class="chooserootboxitem_word">${ele.sname}</div>
                      </div>`;
             });
             $(".chooserootbox").html(str);
             console.log(2)
         })
         .catch(function (error) {
            console.log(error);
         });
}
getseed();   //执行上面的函数

//点击选取种子
$(".chooserootbox").on("click",".chooserootboxitem",function () {
    console.log(455);
    $(this).siblings().children(".chooserootboxitem_word").removeClass('onactive');
    $(this).children(".chooserootboxitem_word").addClass('onactive');
})
复制代码

因为绑定事件时元素不存在，所以选择页面中存在的该列表元素的父元素作为绑定事件的对象，利用on函数的第二个参数来实现事件的“转移”。

知识点on函数的详解：

只供参考，欢迎交流。

转载于:https://juejin.im/post/5c75f6185188256fd62d52c8