使用jquery 调用 click 事件的三种方式

第一种方式:

$(document).ready(function(){  
  $("#clickme").click(function(){  
    alert("Hello World  click"); 
  })   
});

第二种方式:

$('#clickmebind').bind("click", function(){  
    alert("Hello World  bind");  
});

第三种方式:

$('#clickmeon').on('click', function(){  
    alert("Hello World  on");  
});

注意:第三种方式只适用于jQuery 1.7以上的版本

源码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>  
    <script type="text/javascript" src="js/jquery.validate.js"></script>  
    <script type="text/javascript" src="js/jquery.metadata.js"></script>  
    <script type="text/javascript" src="js/messages_zh.js"></script>  
    <style type="text/css">  
        #frm label.error {  
          color: Red;  
        }  
    </style>  
    </head>  
    <script type="text/javascript">  
    $(document).ready(function(){  
      $("#clickme").click(function(){  
           alert("Hello World  click");  
      });  
      $('#clickmebind').bind("click", function(){  
        alert("Hello World  bind");  
      });  
      $('#clickmeon').on('click', function(){  
      alert("Hello World  on");  
      });  
    });  
    </script>  
    <body>  
    <label></label>  
    <form id="frm" name="frm" method="post" action="">
      <label>用 户 名:  
          <input type="text" name="username" id="username" />  
      </label>  
      <p>  
        <label>邮       编 :<label></label></label>  
        <label>  
          <input type="text" name="postcode" id="postcode" />  
          <br />  
        </label>  
      </p>  
      <p>
        <label>数      字 :   
          <input type="text" name="number" id="number" />  
        </label>  
        <br />
        <label>身份证号:  
          <input type="text" name="identifier" id="identifier" />  
        </label>  
        <label>  
          <input type="button" name="clickme"  id="clickme"   value="click me" />   
        </label>  
        <label>  
          <input type="button" name="clickmebind" id="clickmebind"  value="clickme_bind" />  
        </label>  
        <label>  
          <input type="button" name="clickmeon" id="clickmeon"  value="clickme_on" />  
        </label>  
      </p>  
    </form>  
    </body>  
    </html>

欢迎分享本文,转载请保留出处:前端ABC » 使用jquery 调用 click 事件的三种方式

赞 (0)
分享到:更多 ()

发表评论 0