我用jquery动态插入节点后，直接绑定click事件，调试半天发现无效，原来需要动态绑定事件，可以用live()函数，如下实例：
live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
语法
$(selector).live(event,data,function)
向未来的元素添加事件处理器
live() 如何工作
.live()背后神奇的地方就在于它并不将事件绑定到你选定的elements上，而实际上是绑定到了DOM树的跟节点（例子中是$(document)）,而是在element中就像一个参数一样进行传递。
那么当你点击一个元素时，click事件就会在DOM树上往上传递，直至到达根节点。这个.click()事件的触发器已经在根节点被.live()创建。这个触发方法将首先检测被点击的目标看是否和.live()调用的选择器相匹配。所以上面的例子中，会检查点击的元素是否和$('a').live()中的$('a')相匹配，如果匹配，那么绑定的方法就会执行了。
因为不管你在根节点内点击了什么，根节点的.click()事件都会被触发，当你点击加入到根节点的任何元素时这个检查都会发生。
如何使用 live() 方法向尚未创建的元素添加事件处理器。
| 代码如下 | 复制代码 |
|
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").live("click",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>This is a new paragraph.</p>").insertAfter("button"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>点击任意 p 元素会令其消失。包括本段落。</p> <button>在本按钮后面插入新的 p 元素</button> <p><b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。</p> </body> </html> |
|
下面我们来看个实例
| 代码如下 | 复制代码 |
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> </head> <body> <input type="button" value="测试" class="test"/> <script> $(function(){ //第一个测试按钮是有效的 $(".test").click(function(){ alert("this is ok"); }); //第二个按钮点击事件就无效了 $('<input type="button" value="测试" class="test"/>').insertAfter(".test"); }); </script> </body> </html> |
|
用live函数就可以了：
| 代码如下 | 复制代码 |
| <script> $(function(){ $('<input type="button" value="测试" class="test"/>').insertAfter(".test"); $(".test").live('click',function(){ alert("all button is ok"); }); }); </script> |
|
当然，如果你克隆元素clone(true)，带上true参数，事件处理函数也是会被复制的，如下：
| 代码如下 | 复制代码 |
|
<script> $(function(){ $(".test").click(function(){ alert("all button is ok , too !"); }); $(".test").clone(true).insertAfter(".test"); }); </script> |
|
时间： 2024-10-26 16:13:02