是否有一种方法可以解除对每个元素实例的委托事件的绑定

Question

我需要做的是使用委托在每个匹配的元素上获得jQuery.one的功能。

正如你所看到的，点击"Baz"或"Bat"的链接会多次附加"（已删除）"。另一方面，单击"Foo"的链接只会执行一次代码，但也会禁用"Bar"的链接（反之亦然）。

Fiddle：http://jsfiddle.net/JcmpN/

我想做的是，点击其中任何一个都会执行该元素的处理程序，但会保留其他元素，直到它们也被点击一次。

HTML:

<ul id="product-list">
  <li>
    <span class="product-name">Foo</span>
    <a href="#remove-foo" class="removeWithOne">Remove Product</a>
  </li>
  <li>
    <span class="product-name">Bar</span>
    <a href="#remove-bar" class="removeWithOne">Remove Product</a>
  </li>
  <li>
    <span class="product-name">Baz</span>
    <a href="#remove-baz" class="removeWithOn">Remove Product</a>
  </li>
  <li>
    <span class="product-name">Bat</span>
    <a href="#remove-bat" class="removeWithOn">Remove Product</a>
  </li>
</ul>

jQuery:

// this version removes the handler as soon as any instance is clicked!
$('#product-list').one('click.productRemoveOne', 'a.removeWithOne', function (e) {
  var $this = $(this),
      $name = $this.siblings('span.product-name');
  e.preventDefault();
  $name.text($name.text() + ' (removed)');
});
// this one executes the handler multiple times!
$('#product-list').on('click.productRemoveOn', 'a.removeWithOn', function (e) {
  var $this = $(this),
      $name = $this.siblings('span.product-name');
  e.preventDefault();
  $name.text($name.text() + ' (removed)');
});

Answer 1

只需使元素不再与选择器匹配：http://jsfiddle.net/JcmpN/3/

$('#product-list').on('click.productRemoveOn', 'a.removeWithOn:not(.ignore)', function (e) {
  var $this = $(this).addClass("ignore"),
  ...

Answer 2

将ID放在各个跨度上，然后在处理程序中添加：

rowref=$(this).attr("id");
$('#'+rowref).click(function(){event.stopImmediatePropagation()}

保持委托处理程序不变，但在事件到达之前拦截事件。