Question

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

如您所见，单击“Baz”或“Bat”链接会多次附加“（已删除）”。另一方面，单击“Foo”链接只执行一次代码，但也禁用“Bar”（反之亦然）。

我想要发生的是点击其中任何一个都会执行该元素的处理程序，但在其他元素被点击之前保留其他元素。

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()}

保留委托的处理程序，但在事件到达之前拦截该事件。

有没有办法解除每个元素实例上的委托事件的绑定？

2 个答案: