Is there a way to unbind a delegated event on each

Question

What I need to do is get the functionality of jQuery.one on each matched element using delegation.

As you can see clicking on the link for "Baz" or "Bat" appends "(removed)" multiple times. On the other hand clicking the link for "Foo" executes the code only once, but then also disables it for "Bar" (or vice versa).

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

What i want to happen is that clicking on any of these executes the handler for that element, but leaves the others intact until they are also clicked once.

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

Put IDs on the individual spans, then in your handler add:

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

Leaving the delegated handler intact, but intercepting the event before it gets there.

Answer 2

Simply make the element no longer match the selector: http://jsfiddle.net/JcmpN/3/

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