jQuery bind and unbind (绑定和解除)

我在上两篇文章：jQuery对事件的处理和jQuery节点克隆里介绍了实现事件的委派和传递的两种不同方法。在这边文章里，我将介绍另外一种方法：递归绑定法(recursive binding)。jQuery里的.bind()方法，其实是一种对事件处理的通用写法。例如点击事件：.click(), 可以写成 .bind(‘click’)。而.unbind()，顾名思义就是解除事件处理。

我们依旧使用同样的例子:

 <div>
   <ul id="list1">
     <li>非按钮 </li>
     <li><button>点击我</button> </li>
   </ul>
 </div>

当点击按钮，新的按钮被加入列表，并且事件被传递，也就是说点击新的按钮，也可以产生按钮。下面是递归捆绑法：

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('原始绑定');
  });
});

注意：在递归函数里，我们必须先解除事件然后再绑定事件，这么做是为了防止按钮的事件被多次捆绑。

演示：

• 非按钮

通过上面的演示，你可能发现一个问题：点击最初的按钮，你没有看到“原始绑定”这几个字别加在按钮后面。虽然在代码里，我定义了原始事件捆绑，但是在递归函数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('原始捆绑');
  });
});

演示：

• 非按钮