2013-02-12 2 views
2

Что мне нужно сделать, так это получить функциональность 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)'); 
}); 
+0

Вы хотите что-то ищите? http://jsfiddle.net/j08691/JcmpN/1/ – j08691

ответ

1

Просто не сделать элемент больше не соответствует селектор: http://jsfiddle.net/JcmpN/3/

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

Лучше использовать .one() или $ this.off (e) в слушателе. – Savageman

0

Put идентификаторы на отдельных пролетах, то в вашем обработчик:

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

Оставив делегированный обработчик неповрежденным, но перехват события до его поступления.

 Смежные вопросы

  • Нет связанных вопросов^_^