[JavaScript] Buttons disablen na een klik

[Preau]

Hallo,

Ik ben bezig met een projectje waarvan kinderen gebruik gaan maken.
Dit werkt met een touchscreen interface en omdat kinderen nogal onrustig zijn wil ik graag dat buttons na 1 klik worden gedisabled.

Het gaan om buttons die via een Ajax call de content van de volgende pagina inladen.

JavaScript:

$("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(500, redirectPage);
    });

De button moet dus tijdens die fadeOut disabled worden.

Ik heb de functie one() van jQuery al geprobeerd maar dat werkt niet omdat de pagina niet herladen wordt en dan dus maar één keer per sessie een button kan worden ingedrukt. Deze functie is daarna niet meer beschikbaar voor de andere buttons. (Alle buttons gebruiken deze functie).

Hoe kan ik dit het beste oplossen?

Alvast bedankt!

[Bosmonster]

JavaScript:

$("a.transition").data('clicked',false).click(function(event){ 
        event.preventDefault(); 
        if ($(this).data('clicked')) return this;
        $(this).data('clicked',true);
        linkLocation = this.href; 
        $("body").fadeOut(500, redirectPage); 
    });

Zoiets lijkt me toch wel simpel? Kun je ze ook eenvoudig weer enablen.

Andere mogelijkheid (maar dan kun je ze lastiger weer enablen):

JavaScript:

$('a.transition').each(function(){
   $(this).one('click', function(e) {
        e.preventDefault();
        // etc..
   });
});

Zo kun je one() individueel gebruiken met een enkele selector, door ze te wrappen in een each.

[ Voor 38% gewijzigd door Bosmonster op 04-05-2011 22:45 ]

[Preau]

Bosmonster schreef op woensdag 04 mei 2011 @ 22:39:
Zoiets lijkt me toch wel simpel? Kun je ze ook eenvoudig weer enablen.

Oké dat was inderdaad een stuk simpeler als ik dacht, ik zat er veel te moeilijk over te denken.

[R4gnax]

Of je doet het zonder de jQuery data collectie te vervuilen met een generieke 'clicked' property, maar met wat slim opgezette bind / unbind logica.

JavaScript:

$( "a.transition" ).bind( "click", function(event){
  var $this = $( this );

  event.preventDefault();
  $this.unbind( arguments.callee );

  $( "body" )
    .fadeOut( 500 )
    .queue( function( next ){ 
      redirectPage( $this.attr( "href" ));
      $this.bind( arguments.callee );
      next();
    });
});

Trouwens, vaag staat me nog bij dat IE wel eens rare dingen wil gaan doen wanneer de body verborgen wordt (wat intern in jQuery gebeurt zodra de fadeOut animatie afgelopen is), dus misschien wil je e.e.a. voor de veiligheid op een site-wide wrapper element toepassen i.p.v. direct op de body.

[ Voor 22% gewijzigd door R4gnax op 05-05-2011 21:55 ]

[Bosmonster]

R4gnax schreef op donderdag 05 mei 2011 @ 21:52:
Of je doet het zonder de jQuery data collectie te vervuilen met een generieke 'clicked' property, maar met wat slim opgezette bind / unbind logica.

Vervuilen vind ik wel een erg groot woord

Het is gewoon een interne state-property van de link in dit geval, juist ook waar data o.a. voor bedoeld is.

Het grote voordeel van de state bewaren is dat je eenvoudig een of meerdere kunt enablen/disablen. Stel dat je alleen een bepaalde set buttons tijdelijk wilt disablen, dan werkt zo'n state erg eenvoudig en transparant.

Het hele event unbinden en rebinden lijkt me juist wat zonde van de resources, maar uiteindelijk komt het allemaal op hetzelfde neer natuurlijk

[ Voor 4% gewijzigd door Bosmonster op 06-05-2011 11:33 ]