zoukankan      html  css  js  c++  java
  • jQuery 中的事件绑定与取消绑定

      1:在jQuery中使用bind方法进行事件的绑定,bind方法有两个参数,第一个参数是事件的类型例如click,change,keyup,keydown,blur,focus等。第二个参数是一个回调函数(callback function),当事件被触发时会执行这个回调函数。

      如果想清除绑定的事件可以使用unbind方法,此方法接收一个事件类型作为参数,$(element).unbind()。

      以下是一些通过bind与unbing的方法:

      

    案例:对每个li元素绑定click事件,当点击li标签时,将其背景色变为红色。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        ul{ background-color:#dcdcdc; list-style:none; width:300px; padding:0px;}
        li{ cursor:pointer;margin:10px 0px 0px 0px;}
        </style>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript">
        $(function(){
            $('li').bind('click',function(){
            $(this).css('background-color','red');    
            });    
        }); 
        </script>
    </head>
    <body>
       <ul>
           <li>China</li>
           <li>India</li>
           <li>USA</li>
       </ul> 
    </body>
    </html>

    效果图:

    2:如何对通过js动态生成的html元素绑定事件?可以使用live(event type,callback function);如果想清除绑定的事件可以使用die方法:$(element).die(event type);

    案例:点击按钮生成新的html元素节点,然后对其注册点击事件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        div{ border: 1px solid black; cursor: pointer; width: 200px; margin: 10px;}
        </style>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
            $('body').append('<div class="future">I am a new div</div>');    
            });    
            $('div').live('click',function(){
            $(this).css({'color':'red','font-weight':'bold'}).html('You clicked me!');    
            });
        }); 
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="Create A New Element"/>
        <div class="future">Already on page</div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    SAP扫盲系列之二:SAP ABAP应用服务器的组成部分
    SAP扫盲系列之一:什么是SAP系统和应用服务器
    SAP CRM中间件下载时,为什么有时候会生成一个奇怪的BDOC容器
    SAP Cloud for Customer ABSL的一些优化
    How to test Delta download in CRM Side
    SAP CRM中间件下载时数据库表CRMATAB为空的处理方法
    如何关闭SAP CRM中间件的delta download方式
    SAP CRM Fiori应用冗余round trip的原因分析
    SAP CRM WebClient UI上以html格式显示note的问题讨论
    微信授权登录
  • 原文地址:https://www.cnblogs.com/yshyee/p/3388051.html
Copyright © 2011-2022 走看看