Что мне нужно сделать, так это получить функциональность jQuery.one
по каждому согласованному элементу с помощью делегирования.Есть ли способ отвязать делегированное событие для каждого экземпляра элемента?
Как видите, щелчок по ссылке для «Баз» или «Бат» добавляет «(удален)» несколько раз. С другой стороны, щелчок по ссылке для «Foo» выполняет код только один раз, но затем также отключает его для «Бар» (или наоборот).
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)');
});
Вы хотите что-то ищите? http://jsfiddle.net/j08691/JcmpN/1/ – j08691