61459

Disabling clicking when using .fadeOut() in jQuery

Question:

I am building a card game. When the user clicks the card, the card fades out. However, at the moment, there is a serious bug. The user can click one card multiple times, adding multiple card numbers to an array (essentially picking lots of cards).

How can i resolve this? Here is my code so far:

$(clicked_id).fadeOut('fast');

Any help would be appreciated!

Edit: entire code:

<script> var cardsPicked = new Array; var suits = ["&hearts;", "&diams;", "&clubs;", "&spades;"]; var king = 0; var numbers = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]; var cardRules = ["Waterfall", "You", "Me", "Girls", "Thumbmaster", "Guys", "Heaven", "Mate", "Rhyme", "Catagories", "Make a rule", "Question master", "Pour your drink!"]; var currentId; function getCard(clicked_id) { clicked_id = "#" + clicked_id; $(clicked_id).fadeOut('fast'); var newCard = Math.floor((Math.random() * 13) + 1); var newSuit = Math.floor((Math.random() * 4) + 1); var currentCard; var x = document.getElementById("pick"); var rules = document.getElementById("rules"); var kings = document.getElementById("kings"); var currentCards = document.getElementById("currentCard"); if (cardsPicked.indexOf(numbers[newCard - 1] + " " + suits[newSuit - 1]) == -1) { if (numbers[newCard - 1] == "K" && king < 4) { king = king + 1; } if (king == 4) { king = "All kings found!"; alert("Fourth king picked. Down the jug!"); } cardsPicked.push(numbers[newCard - 1] + " " + suits[newSuit - 1]); for (count = 0; count < cardsPicked.length; count++) currentRule = cardRules[newCard - 1]; x.innerHTML = cardsPicked; currentCards.innerHTML = numbers[newCard - 1] + " " + suits[newSuit - 1]; rules.innerHTML = currentRule; kings.innerHTML = king; } else { getCard(); } }

Answer1:

Try this

$(clicked_id).off().fadeOut('fast'); <hr />

In case the event is called by inline onclick :

$(clicked_id).prop("onclick", "").off().fadeOut('fast');

<a href="http://jsfiddle.net/G5SVC/1/" rel="nofollow"><strong>DEMO</strong></a>

Answer2:

You should first remove the click event on the element, then do the fade out effect with a callback function which will reattach the click event.

$('#clicked_id').off('click').fadeOut('fast', function () { $('#clicked_id').on('click'); });

This is completely untested and just a theory but it might work!

Recommend

  • Strange srand behaviour inside for loop; c++
  • Issue printing out objects from arraylist
  • How to get component version from Joomla?
  • How to fix .gif with corrupted alpha channel (stuck pixels) collected with Graphicsmagick?
  • How to log SQL errors AND warnings with a Lua script on mysql-proxy
  • Get previous page phonegap javascript
  • How to get a character ASCII value in a integer variable?
  • Programmatically I need to disconnect my internet connection using C#?
  • quiver not drawing arrows just lots of blue, matlab
  • Suppressing passwd when calling sqlplus from shell script
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • Fetching methods from BroadcastReceiver to update UI
  • vba code to select only visible cells in specific column except heading
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Symfony2: How to get request parameter
  • Rearranging Cells in UITableView Bug & Saving Changes
  • GridView Sorting works once only
  • Circular dependency while pushing http interceptor
  • Linker errors when using intrinsic function via function pointer
  • How to delete a row from a dynamic generate table using jquery?
  • WPF Applying a trigger on binding failure
  • Benchmarking RAM performance - UWP and C#
  • using HTMLImports.whenReady not working in chrome
  • Angular 2 constructor injection vs direct access
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • Bitwise OR returns boolean when one of operands is nil
  • EntityFramework adding new object to nested object collection
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal