jquery調用綁定click事件的3種寫法

字號:


    這篇文章主要介紹了jquery調用綁定click事件的3種寫法,本文簡潔清晰的給出3種寫法的代碼示例,可以很方便的復制使用,需要的朋友可以參考下
    第一種方式:
    $(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 >
    <html xmlns=>
    <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>