jquery-wordpress

jQuery ile Sadece Bir Sefer Tıklama

Merhaba,

Bu makalede jQuery ile bir  elemente tıklandığında yapılan işlemin sadece bir kere yapılmasını nasıl sağlayacağınızı gösteriyorum. Açıklama biraz karışık olmuş olabilir. Örnekleyerek açıklayayım.

Bir butonunuz olsun. Bu butona ilk tıklandığı zaman alert() ile bir mesaj göstersin. İkinci ve sonraki tıklamalarda hiç bir işlem yapmasın.

jQuery’de bu işlemi yapmamızı sağlayan .one() fonksiyonu var. Bu fonksiyon hakkında daha fazla bilgi edinmek istiyorsanız jQuery .one() sayfasına göz atın.

Bu işlemi iki farklı yöntemle gerçekleştirebiliriz. #bana_tikla id’li bir butonumuz olsun ve bu butona tıklayınca “Sadece bir kere bu yazıyı göreceksiniz” şeklinde bir alert versin.

Yöntem 1

$("#bana_tikla").one("click", function() {
      alert("Sadece bir kere bu yazıyı göreceksiniz.");
});

Yöntem 2

$("#bana_tikla").bind("click", function( event ) {
alert("Sadece bir kere bu yazıyı göreceksiniz.");
$(this).unbind(event);
});

Umarım açıklayıcı olmuştur ve istediğinizi verebilmişimdir. Basit bir işlem fakat bu fonksiyonu bilmeyebilirsiniz. Tıklamaları tek tek sayıp sadece ilkse şeklinde if’li işlemlerle eskiden kontrol ederdim. Bu nedenle bu makalenin faydalı olabileceğini düşünüp paylaştım.

Post Author: Oral ÜNAL

Web geliştirmeyi başta meslek olarak hayal eden fakat daha sonra bir hobi haline getiren birisiyim işte.

jQuery ile Sadece Bir Sefer Tıklama” için 6 yorum

  • Serkan

    (18 Temmuz 2012 - 23:43)

    .one() fonksiyonu ile .bind() fonksiyonu arasındaki fark nedir peki? aynı amaç adına kullanabiliyoruz da bi fark varmı, başka bir durumda kullanabilmek adına soruyorum. Makale için teşekkürler.

    • Oral ÜNAL

      (19 Temmuz 2012 - 00:02)

      .bind() ile eventleri yakalayıp işlem yapabilirsin. bind ile tıklamayı üzerine gelmeyi vb. herşeyi yakalayıp takip edebilirsin.

      Bu örnekte one fonksiyonu tek bir sefer yapmasını sağlıyor eventi. Bind tek başına kullanıldığında tek sefer mahsus olmasını sağlayamazsın. İkinci kodda göreceğin gibi unbind() var birde. unbind ile click vb. eventlerin çalışmasını durdurursun. Belki biraz dağınık bir açıklama oldu. Bununla ilgili http://www.mkyong.com/jquery/jquery-bind-and-unbind-example/ adresindeki yazıyı okuyarak ve jquery’nin sitesinden bind() ve unbind() fonksiyonlarını okursan sorularının cevabını bulabilirsin.

      Kolay gelsin

  • Abbas

    (23 Aralık 2012 - 19:18)

    Aşağıdaki gibi bir jquery yapım var

    $(document).ready(function(){
       $.sayfa = {
          gelen : function(deger){
             var links = $("textarea[name=links]");
             if(deger=="sayfa"){
                $('.sayfalar').toggle();
                $('.sayfalar span').click(function(){
                   $('.sayfalar').hide();
                });
               $(".sayfalar a").click(function(){
                  var syf = $(this).attr('href');
                  var linkler = $(links).val();
                  $(links).val(linkler+syf);
               });
             }
          }
       }
    });

    deger değişkeni sayfa ya eşit olduğunda ilgili kodlar çalışıyor buraya kadar sorun yok. Fakat $(‘.sayfalar’).toggle(); her çalıştırıldığında yada açılan toogle ı kapatmak için $(‘.sayfalar span’).click(function(){}); kısmına her tıklandığında (yani her gösterip gizlemeden sonra) $(“.sayfalar a”).click(function(){}); kod bloğu ne alakaysa her açma kapamadan sonraki tıklamada textarea ya bir fazladan link ekliyor diyelim 3 kere kapatıp açtık sonra bir linke tıkladık textareaya eklesin diye tıklanan linki 3 defa ekliyor sizce sorun nedir?

  • Oral ÜNAL

    (24 Aralık 2012 - 02:30)

    Açıkcası tam olarak ne yapmaya çalıştığını anlayamadığım için yorum yapamadım. Biraz daha yaptırmaya çalıştığın örneği örnek bir sayfa ile gösterme imkanın var mı?

  • halit gürcan

    (31 Aralık 2012 - 20:10)

    Merhaba Orhan Bey

    1 den fazla tıklama sebebiyle db ye çoklu kayıt yapılması gibi bir sorunum var çözüm için iletişim kurmanız mümkünmüdür.
    Saygılar
    Halit GÜRCAN
    Tel : 0533 317 0 318
    mail: info@acilensatiyorum.com

  • oray

    (03 Kasım 2014 - 19:39)

    Yöntem 3

    $(‘#btn’).click(function(){
    alert(‘Button clicked!’);
    $(‘#btn’).unbind(‘click’);
    });

    .Bu da düşünülebilir..

Yorum yazma sırası sizde!