は、かつて私が結合して、クリックされた唯一のイベントリスナーをアンバインドしようとしている

Question

... div要素がクリックされたら

• ユーザーが本部
• をクリックを実行しました...それは、その後
• コードは、コードの終わりに
• に実行されるイベントリスナーにバインドされ... divがイベントリスナーから、その後unbindedある

$(document).on('click', '.clickable:not(.clicked)', function(event) { 
 
var $this = $(this); 
 

 
$this.addClass('clicked'); 
 
    
 
if ($this.hasClass($this.data('add-class'))) { 
 
    $this.removeClass($this.data('add-class')); 
 
} 
 
else { 
 
    $this.addClass($this.data('add-class')); 
 
} 
 
    
 
$this.removeClass('clicked'); 
 
});

.clickable { 
 
width: 100px; 
 
height: 100px; 
 
background: #edf0f6; 
 
margin: 10px; 
 
transition: .5s; 
 
float: left; 
 
border: 1px solid transparent;} 
 

 
.clickable:hover { 
 
border: 1px solid #10cffc; 
 
box-shadow: 0 0px 15px rgba(0, 0, 0, 0.25);} 
 

 
.click1 { 
 
    transform: scale(1.1); 
 
} 
 
.click2 { 
 
    -webkit-transform: rotateZ(90deg); /* Standard syntax */ 
 
    transform: rotateZ(90deg); /* Standard syntax */ 
 
} 
 

 
.click3 { 
 
    height: 180px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-add-class="click1" class="clickable"></div> 
 
<div data-add-class="click2" class="clickable"></div> 
 
<div data-add-class="click3" class="clickable"></div>

Answer 1

で行くには、それに依存クリックした要素とフィルターにクラスを追加します。

$(document).on('click', '.clickable:not(.clicked)', function(event) { 
    $(this).addClass('clicked'); 
    //code to execute at most once for each elements in matched set 
}); 

Answer 2

次のようにイベントをバインド解除するために使用しjqueryのoffあなたが直接ではなく、クラスセレクタによって要素を選択できるように、これらは、HTMLの静的な要素なので、あなたはここでイベントの委任を使用する必要はありません文書のクリックイベントの後に代表団を介して取得されている：イベントは、委任を介して適用されると

$('.clickable').on('click', function(event) { 
    var $this = $(this); 

    if ($this.hasClass($this.data('add-class'))) { 
     $this.removeClass($this.data('add-class')); 
    } 
    else { 
     $this.addClass($this.data('add-class')); 
    } 

    $this.off('click'); // unbind me from next click 
}); 

、その後、子どもたちの具体的なバインド解除は、その場合には、あなたがA.Wolffのソリューション@使用することができ、ことはできません。

Answer 3

ここでは、ソリューション

$(document).on('click', '.clickable', function(event) { 
 
    var $this = $(this); 
 
    $('.clickable').removeClass('add-class'); 
 
    $this.addClass('add-class'); 
 
    $this.off('click'); 
 
});

.clickable { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #edf0f6; 
 
    margin: 10px; 
 
    transition: .5s; 
 
    float: left; 
 
    border: 1px solid transparent; 
 
} 
 

 
.clickable:hover { 
 
    border: 1px solid #10cffc; 
 
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.25); 
 
} 
 

 
.click1 { 
 
    transform: scale(1.1); 
 
} 
 
.click2 { 
 
    -webkit-transform: rotateZ(90deg); /* Standard syntax */ 
 
    transform: rotateZ(90deg); /* Standard syntax */ 
 
} 
 

 
.click3 { 
 
    height: 180px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-add-class="click1" class="clickable"></div> 
 
<div data-add-class="click2" class="clickable"></div> 
 
<div data-add-class="click3" class="clickable"></div>

Answer 4

をあなたはすでに、なぜ、jQueryのを使用している場合.one（）メソッドを使用しないでください。 http://api.jquery.com/one/