您當前位置：首頁 > web前端 > htmlcss > jquery 調用 click 事件的三種方式

jquery 調用 click 事件的三種方式

來源：程序員人生發布時間：2017-01-13 11:00:11 閱讀次數：4392次

jquery 調用 click 事件的 3種方式

第1種方式：

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

第2種方式：

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

第3種方式：

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

注意：第3種方式只適用于jquery 1.7以上的版本

源碼以下：

    <span style="color:#333333;"><!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⑴.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>  
    </span>