zoukankan      html  css  js  c++  java
  • jquery点击事件失效原因和解决办法

    在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候

    例如:给demo里添加li元素给li绑定点击事件

     $("#demo").append('<li>点我</li>'); 

    给li元素绑定点击事件

    // 示范一
    $("#demo li").click(function(){
        alert($(this).html());
    });
    // 示范二
    $("#demo li").on('click',function(){
        alert($(this).html());
    });

    这两种绑定方式,点击发现都不能够触发动态添加后的li元素

    动态生成的标签事先绑定的点击事件点击了没反应。

    推测上面这个监听函数,是在网页加载的时候就指定了对象,而通过代码追加,如通过js追加的元素,是不能匹配这个事件的。

    那么,我们应该使用什么来绑定动态元素呢,支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。

    例如:

    $("#demo").on('click', 'li',function(){
        alert($(this).html());
    });
    
    // 或者
    
    $(document).on('click', 'li',function(){
        alert($(this).html());
    });
  • 相关阅读:
    Android状态栏白底黑字,只需两步轻松搞定
    MyBatis注解
    MyBatis延迟加载和缓存
    MyBatis关联查询
    mybatis智能标签1
    Mybatis智能标签
    增删改查
    初始MyBatis
    第7章:Servlet 基础
    第3章 JSP数据交互(二)
  • 原文地址:https://www.cnblogs.com/leiting/p/9323539.html
Copyright © 2011-2022 走看看