jquery - How to use .off('click') when do like $('.parent').on( 'click' , '.children');

Question

When I have multiple divs like...

<div class="parent">
    <button class="children">click</button>
</div>

<div class="parent">
    <button class="children">click</button>
</div>

(Normally, I add this html by using jQuery)

I will my buttons will work only one time per one button

$('.parent').on('click', '.children', function () {
    alert('test');
    $(this).off('click','.children');
});

I have no idea how to .off() click event each button ?

Playground : http://jsfiddle.net/AYwhL/

PS : jQuery 1.9+

PS : I dont want to cancel all button events

Answer 1

您需要调用.off原始元素：

$('.parent').on('click', '.children', function () {
    alert('test');
    $(".parent").off('click','.children');
});

请参阅此更新的小提琴。但是您总是可以使用.one来达到相同的结果吗？

$('.parent').one('click', '.children', function () {
    alert('test');
});

Answer 2

$('.parent').on('click', '.children', function () {
    alert('test');
    $(this).parent().off('click');
});

演示

Answer 3

如果您使用事件委托，那么您无法取消绑定特定元素的事件处理程序，因为处理程序一开始并未绑定到该元素。

但是，您可以在每个元素上设置一个标志以指示它是否已被处理：

$('.parent').on('click', '.children', function () {
    if ($(this).data('clicked')) return;
    alert('test');
    $(this).data('clicked', true);
});

显然你可以达到同样的效果.one。它还可以处理事件委托。

Answer 4

您可以使用最接近（），

$('.parent').on('click', '.children', function () {
    alert('test');
    $(this).closest('.parent').off('click');// <-- to off all children click
});