jquery trigger 用法实例

来源：互联网发布：淘宝网品牌女裤编辑：程序博客网时间：2024/05/16 12:27

jquery的trigger函数用的好，可以节省很多时间。我觉得trigger有2个用法，还是比较实用的。一个是自定议事件，一个是最基本的触发。

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    <script type="text/javascript">      $(document).ready(function () {          $('#button1').click(function(){              alert('button1');              $('#button2').trigger('click');     //点击1的时候，触发2          });            $('#button2').click(function(){              alert('button2');              $("#button3").trigger("myEvent", ["Hello","World!"]);          });            $("#button3").bind("myEvent", function (event, message1, message2) {  //自定议事件myevent            alert(message1 + ' ' + message2);          });      });  </script>    </head>  <body style="text-align:center;">      <div style="margin-top:130px;">          <button id='button1'>click1</button>          <button id='button2'>click2</button>          <button id='button3'>click3</button>      </div>  </body>  </html>

例子2

<html><head><title>事件触发</title><style type="text/css"><!--input{    font-family:Arial, Helvetica, sans-serif;    font-size:13px;    margin:0px; padding:4px;    border:1px solid #002b83;}div{    font-family:Arial, Helvetica, sans-serif;    font-size:12px; margin:2px;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">function Counter(oSpan){    var iNum = parseInt(oSpan.text());    //获取span中本身的值    oSpan.text(iNum + 1);        //点击次数加1}$(function(){    $("input:eq(0)").click(function(){        Counter($("span:first"));    });    $("input:eq(1)").click(function(){        Counter($("span:last"));        $("input:eq(0)").trigger("click");    //触发按钮1的点击事件    });});</script></head><body>    <input type="button" value="Button 1">    <input type="button" value="Button 2"><br><br>    <div>按钮1点击次数：<span>0</span></div>    <div>按钮2点击次数：<span>0</span></div></body></html>

0 0