用jQuery.delegate()将事件绑定在父元素上面
1.先看看官方的示例:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").delegate("button","click",function(){ $("p").slideToggle(); }); }); </script> </head> <body> <div style="background-color:red"> <p>这是一个段落。</p> <button>请点击这里</button> </div> </body> </html>
2.该方法的定义如下:
$(selector).delegate(childSelector,event,data,function)
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)
3.在用ajax的异步加载数据的时候,由于界面上绑定事件已经无效了,用这种方法将事件绑定在父级元素上面就避免了每次异步请求数据之后都要重新绑定方法的烦恼了。
有的朋友可能还有疑惑,命名绑定了事件的,怎么就是不触发呢?因为ajax之后你的页面元素被重写了,而界面初始化时绑定的事件是绑在ajax还没有执行的时候。我每次遇到用ajax加载数据更新页面内容时就是用这种方法绑定事件的。
看我项目中的一个栗子:
/** * 点击行事件 **/ $('#table_tbody').delegate('tr','click',function(){ //do something }); /** * 每行的点击提交按钮 **/ $('#table_tbody>tr').delegate('.SUBMIT','click',function(){ //do something });
就说这么多啦,不对的地方欢迎指出。