zoukankan      html  css  js  c++  java
  • jq的click 与 on 的区别

    <div>  
        <h1>Click</h1>  
        <button class="add">Click me to add new item</button>  
        <ul class="li">  
            <li>I am old item.<button class="delete">Delete</button></li>  
            <li>I am old item.<button class="delete">Delete</button></li>  
            <li>I am old item.<button class="delete">Delete</button></li>  
        </ul>  
    </div>
    
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>  
    <script type="text/javascript">  
    $(".add").click(function(){  
        $(".li").append('<li>I am new item.<button class="delete">Delete</button></li>');  
    });  
    $(".delete").click(function(){  
        $(this).parent().remove();  
    });  
    </script>  
    

      上面的例子通过button添加的li无法删除,原因在于是新添加的HTML代码,没有绑定click事件,

    解决方法:将click事件换成on事件

    $(".li").on('click','.delete',function(){  
        $(this).parent().remove();  
    });  
    

      

    关于on的更多解释:

    on()函数用于为指定元素的一个或多个事件绑定事件处理函数

    此外,你还可以额外传递给事件处理函数一些所需的数据。

    从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。

    on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。

    此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

    要删除通过on()绑定的事件,请使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。

  • 相关阅读:
    ubuntu上安装nginx+mysql+php5-fpm(PHP5
    创建内存盘
    ubuntu上安装apache2+mysql+php5-fpm(PHP5
    Cubieboard Linaro 搭建超节能监控平台
    CubieBoard开发板数据源介绍
    如何在github创建个人主页?
    android studio配置git
    greenDao使用时遇到的坑
    FragmentManager is already executing transactions
    AndroidSchedulers.mainThread()无法切换到主线程,原来是细节问题啊
  • 原文地址:https://www.cnblogs.com/qijuzi/p/6873968.html
Copyright © 2011-2022 走看看