递归绑定法(recursive binding)。jQuery里的.bind()方法,其实是一种对事件处理的通用写法。
例如点击事件:.click()
, 可以写成.bind(‘click’)
。而.unbind()
,顾名思义就是解除事件处理。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jQueryPad Preview</title> <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script> <style type="text/css"> body { font-family: Segoe UI; font-size: 10pt; background: white; } </style> <script type="text/javascript"> function addItem() { $('#list1 li button') .unbind('click')//解除click事件 .bind('click', function(){ var $newLi = $('<li><button>新按钮</button></li>'); $(this).parent().after($newLi); addItem();//使用递归函数重新赋值 }); } $(document).ready(function() { addItem(); // 以下是原始事件绑定 $('#list1 li button').click(function() { $(this).after('原始绑定'); }); }); </script> </head> <body> <div> <ul id="list1"> <li>非按钮 </li> <li><button>点击我</button> </li> </ul> </div> </body> </html>
通过上面的演示,你可能发现一个问题:点击最初的按钮,你没有看到“原始绑定”这几个字别加在按钮后面。
虽然在代码里,我定义了原始事件捆绑,但是在递归函数addItem()
里,这原始事件被解除(unbind
)了。
如何让unbind函数只解除新的事件而保留原始事件呢。其中一种办法是,使用“命名空间”(namespacing)
function addItemNS() {
$('#list2 li button')
.unbind('click.addit')//这里加上了addit,建立命名空间
.bind('click.addit', function() {
var $newLi = $('<li > <button>新按钮</button></li>');
$(this).parent().after($newLi);
addItemNS();
});
}
$(document).ready(function() {
addItemNS();
//原始事件捆绑
$('#list2 li button').click(function() {
$(this).after('原始捆绑');
});
});