2

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

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

小提琴：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)');
});
4

2 回答 2

1

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

$('#product-list').on('click.productRemoveOn', 'a.removeWithOn:not(.ignore)', function (e) {
  var $this = $(this).addClass("ignore"),
  ...
于 2013-02-12T22:17:47.377 回答
0

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

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

保持委托处理程序完好无损，但在事件到达之前拦截事件。

于 2017-10-10T10:29:13.943 回答