javascript - $().click事件触发不了
阿神
阿神 2017-04-11 12:34:02
[JavaScript讨论组]

js代码:

var tpl = "
  • " + "" + "" + timestart + "----" + "" + timeend + "" + "" + "" + "
  • "; $('#sometime').append(tpl); $(".edit").click(function () { alert(1); });

    HTML效果:

    但是我点击class = "edit" 的span 标签 不会触发
    这个点击事件... 也用过js的 就是不触发... 大神求解决!

    阿神
    阿神

    闭关修行中......

    全部回复(6)
    大家讲道理

    哎呀,怎么又是这种问题呀。。。

    • 先说说点击不了的原因:

      • 很简单,因为jq找不到.edit这个类!事情是这样的,虽然说js是边读边执行的,但是并不是真的边读边执行的。众所周知,浏览器里面有两个线程,一个是渲染的,一个是js的,当渲染的线程工作的时候,js的线程是在休息中的,同样,js线程工作的时候,渲染线程就在睡懒觉!

      • 而js是这样读你的代码的:哦,插入一个这样这样的li,好的,等会我下班通知一下渲染哥让他把li插入html里面。然后他继续读到,恩,找一个名字叫.edit的类,给它绑定这样这样的事件,好,我去html文档里面找找看,哎呀,居然没有啊,没有就算了,呀,后面没代码了?太好了下班了,渲染哥,该你上班了。。。。然后渲染哥一上班,就接到js哥的将li插入html文档的要求,渲染哥就放了一个魔法,将li插入进去,然后更新html文档,然后局部重新布局。

      • 所以jq找不到'.edit',这个没办法,因为js读到这个click事件的时候,它还没有在文档里面。。。所以,不知者无罪嘛。。。

    • 那说说解决办法,肯定是事件委托啊:

      $(document).on('click','.edit',clickEventFunction);
      • 这里再啰嗦几句,如果这样写的话,那js是这样读的:document被点击的时候,看看是不是这个.edit的类被点击了,是的话执行这个clickEventFunction,恩,这个简单啊,渲染哥啊,待会要是有人点击了document,而且是点击了document下的这个类啊,就大声叫我起床,我要干点什么!

      • 这样的话,不管你要插入的类是否在文档里面,被点击的时候都会唤醒js线程,一旦存在,js就会去处理点击事件。

      • 不过我还是推荐下面这种写法:

      function $domOfSth(text){
          var $obj=$('<li>..<span class="edit">'+text+'</span>..</li>');
          $obj
              .on('click','.edit',clickEventFunction)
              .on('mouseover','.otherClass',hoverEventFunction)
              ...
          /*甚至还可以帮他写点样式什么的*/
          $obj.css('color','red');
          return $obj
      }
    
    • 这样可以一次性将事件绑定到你要插入的对象里面,而且一目了然,可读写可维护性多不错。

    PHPz

    https://jsfiddle.net/sg2e8be3/

    试验代码没有问题

    所以我猜是在你生成 DOM 过后又发生了 DOM 的变化,这样的话,你就采用代理事件的方式吧

    // 前提是 #sometime 这个 DOM 不会发生变化,如果要发生变化,就往上找事件宿主,可以找到 document 去
    $("#sometime").on("click", ".edit", function() {
        alert(1);
    });

    其实也可以不用事件代理

    https://jsfiddle.net/sg2e8be3/1/

    var tpl = "<li>" +
        "<span class='time'>" +
        "<span class='kaishi'>" + timestart + "----</span>" +
        "<span class='jieshu'>" + timeend + "</span></span>" +
        "<span class='edit glyphicon glyphicon-edit'> asdf </span>" +
        "<span class='delete glyphicon glyphicon-trash'> adsf </span>" +
        "</li>";
        
    var li = $(tpl);
    $("#sometime").append(li);
    
    li.find(".edit").on("click", function() {
        alert(3);
    });
    高洛峰

    采用事件代理,最高可以使用 document,最好使用li 外层的dom元素,动态生成的dom是无法直接绑定时间的。

    $(document).on('click','.edit',function(){
        //代码
    })
    怪我咯

    dom 渲染完成之前你就绑定了事件,绑定的时候可能并没有找到元素。so 调用不到。
    事件代理可以解决
    参数2:表示你实际要触发的子元素
    $(document).on('click','.edit',function(){

    //代码

    });

    ringa_lee

    你这是load过去的?
    用live试试

    PHP中文网
    var tpl = "<li>" +
        "<span class='time'>" +
        "<span class='kaishi'>" + timestart + "----</span>" +
        "<span class='jieshu'>" + timeend + "</span></span>" +
        "<span class='edit glyphicon glyphicon-edit'></span>" +
        "<span class='delete glyphicon glyphicon-trash'></span>" +
        "</li>";
    $('#sometime')
        .append(tpl)
        .find(".edit")
        .click(function () {
            alert(1);
        });
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号