$().click事件触发不了

Question

js代码：

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);
    
    
 $(".edit").click(function () {
        alert(1);
    });

HTML效果：

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

Answer 1

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

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

  • 很简单，因为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
  }

• 这样可以一次性将事件绑定到你要插入的对象里面，而且一目了然，可读写可维护性多不错。

Answer 2

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);
});

Answer 3

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

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

Answer 4

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

//代码

});

Answer 5

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

Answer 6

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);
    });