javascript - $().click事件触发不了

问题描述

问 题

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的 就是不触发... 大神求解决！

解决方案

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

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

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

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

这篇关于javascript - $().click事件触发不了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！