jQueryは、Unbind Clickイベントをバインドします
-
28-09-2019 - |
質問
IDがクリックされた回数を計算するためにJQueryを試みています。たとえば、#kwick_1が一度クリックされた場合、ビデオを「else」にロードしたい場合は何もしません。
そして、私は関数全体にこれを適用することを検討しているので、同じことが2、3、4などにも当てはまります。
これをどのように達成しますか?
var timesClicked = 0;
$('#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7').bind('click', function(event){
var video = $(this).find('a').attr('href'); /* bunny.mp4 */
var clickedID = $(this).attr('id'); /* kwick_1 */
var vid = 'vid';
timesClicked++;
$(this).removeAttr('id').removeAttr('class').attr('id',clickedID + vid).attr('class',clickedID + vid);
if(timesClicked == 1) {
$.get("video.php", { video: video, poster: 'bunny.jpg', }, function(data){
$('.'+clickedID+vid).html(data);
});
} else {
/* Do nothing for now */
}
return false;
});
解決
使用できます .one()
このようにこれを少し簡単に行うには:
$('#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7').one('click', function(event){
var video = $(this).find('a').attr('href'), clicked = this.id + 'vid';
$(this).attr({ id: clicked, 'class': clicked });
$.get("video.php", { video: video, poster: 'bunny.jpg', }, function(data){
$('.'+clicked).html(data);
});
}).click(function() { return false; });
残りは単なる最適化と繰り返しのコードを削減しますが、アイデアは、あなたが一度使用したい部分を拘束することです .one()
, 、そのハンドラーは、最初の実行後にそれ自体を削除します。それから私たちは拘束します return false
使用 .click()
それはすべきだから いつも 起こる。これがバインドされていることを確認してください 後 上記の例のように、イベントハンドラーは順番に実行されるため、それらは拘束されました。
また、あなたはあなたを交換することができます #kwick_1, #kwick_2....
でセレクター .kwick
すべてのクラスを与えることができれば、これはまだ機能し、維持がはるかに簡単になります。
所属していません StackOverflow