は一度だけ

Question

現在、私は、コードのこの部分があります

var tracked = false; 
$('.button').on('click', function(e){ 
    e.preventDefault(); 
    // do stuff on each click 
    if(!tracked) { 
     // track interaction just once 
     tracked = true; 
    } 
}); 

を..しかし、私はそれがよりエレガントな原因私は、各インタラクティブのためにどこでもtracked VARを持つことができないようにしたいです。だから私はこれを考えている：

$('.button').on('click', function(e){ 
    e.preventDefault(); 
    // do stuff on each click 
    $('.button').one('click', function(e){ 
     // track interaction just once 
    }); 
}); 

...しかしそれはとてもいいとは思わない。それは良いことができますか？

編集済み：ボタンは、各クリックで必要な要素をトグルしますが、各クリックではなく、1回だけインタラクションをトラッキングします。

Answer 1

.one()すべてが必要です。これを.on()と同時に使用して複数のイベントリスナーを同じボタンに追加すると、異なるイベントを発生させたり、いくつかのイベントを無効にしたり、無効にすることができます。

.one()イベントは一度発生し、それ自体を削除すると、追加の.on()クリックイベントは残り、発火し続けます。

// add a listener that will only fire once 
 
$('.button').one('click', function(e){ 
 
    console.log('one click event'); 
 
}); 
 

 
// add another listener that will continue to fire 
 
$('.button').on('click', function(e){ 
 
    console.log('regular click event'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="button">Click Me</button>

あなたはできるだけコンパクトにしたい場合は、いくつかのjqueryのチェーンを使用することができます。

$('.button').one('click', function(e){ 
    // tracking code 
}).on('click', function(e){ 
    // toggling code 
}); 

Answer 2

これは基本的に.one()関数のコードと同じですが、コールバックが1つ少なくなります。私はそれがよりエレガントなように感じる。

$('#selector').bind('click', function() { 
 
     $(this).unbind('click'); 
 
     console.log('Clicked!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='selector'>Click Me</button>

Answer 3

別オプションは

function oneTime(el) { 
 
    console.log("ok"); 
 
    el.onclick = null; 
 
}

<button onclick="oneTime(this);">test</button>

ようなものになるだろう。しかし、私は.one()が最良の選択肢であると考えてい。

Answer 4

$('.button').data("tracked", false).on('click', function(e){ 
    e.preventDefault(); 
    if($(this).data("tracked") !== true) { 
     $(this).data("tracked", true); 
     // do stuff on each click 
    } 
});