PrependTo() bug

Question

I'm actually creating a shopping cart in JQuery where elements goes in a big box when you click on them. The problem is that I need "double click" to actually make the icons move to the box. By using prependTo or appendTo, the first click just move the icon to the left/right border. Why? Can you help me fix my code?

Let's see the bug in live...

Live demo: http://raphaelmartin.fr/kitcasino/jsfiddlebug.html

JSFiddle: http://jsfiddle.net/xbsoLp0u/2/

Code:

cart.html

<div id="selected"></div>

    <div id="nonSelected">

      <label for="blackjack"><img onclick="moveButton(this)" src="http://i.imgur.com/kfMWC91.jpg" alt="" data-checked='img/blackjack.gif' data-unchecked='img/blackjack.jpg'></label>
      <INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]">    

      <label for="chuckaluck"><img onclick="moveButton(this)" src="http://i.imgur.com/AvPEx4i.jpg" alt="" data-checked='img/chuckaluck.gif' data-unchecked='img/chuckaluck.jpg'></label>
      <INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]">

      <label for="roulette"><img onclick="moveButton(this)" src="http://i.imgur.com/tBEisp3.jpg" alt="" data-checked='img/roulette.gif' data-unchecked='img/roulette.jpg'></label>
      <INPUT id="roulette" type="checkbox" value="Roulette" name="game[]">

      <label for="stud"><img onclick="moveButton(this)" src="http://i.imgur.com/Oigq8QI.jpg" alt="" data-checked='img/stud.gif' data-unchecked='img/stud.jpg'></label>
      <INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]">

      <label for="holdem"><img onclick="moveButton(this)" src="http://i.imgur.com/Oc52z68.jpg" alt="" data-checked='img/holdem.gif' data-unchecked='img/holdem.jpg'></label>
      <INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]">

      <label for="boule"><img onclick="moveButton(this)" src="http://i.imgur.com/XFsfu7S.jpg" alt="" data-checked='img/boule.gif' data-unchecked='img/boule.jpg'></label>
      <INPUT id="boule" type="checkbox" value="La Boule" name="game[]">

  </div>

script.js

function moveButton(elem){
    if( $(elem).parent().attr("id") == "nonSelected" ){
        $(elem).detach().prependTo('#selected');
    }
    else{
        $(elem).detach().prependTo('#nonSelected'); 
    }
}

Regarding your linked JS Fiddle demo: `Uncaught ReferenceError: moveButton is not defined` — David Thomas, Feb 22 '15 at 13:08
In the fiddle you need to use the `No wrap` option so you can call the function. When I fix that, it seems to work: http://jsfiddle.net/barmar/xbsoLp0u/3/ — Barmar, Feb 22 '15 at 13:10
BTW, you don't need to use `.detach()`. When you prepend to a new element, it's automatically detached from the old element. — Barmar, Feb 22 '15 at 13:12

score 0 · Answer 1 · answered Feb 22 '15 at 13:13

Use ondblclick instead of onclick. You'd also do better adding the click handler via Javascript rather than html -

$(function(){
    function moveButton(){
        if( $(this).closest("#nonSelected").length) {
            $(this).prependTo('#selected');
        }
        else{
            $(this).prependTo('#nonSelected'); 
        }
    }

    $("#nonSelected").on("dblclick", moveButton);
});

Note: prependTo() automatically detaches, and the argument is actually an event, use "this" for the element instead...

score 0 · Answer 2 · answered Feb 22 '15 at 13:19

The problem is that the parent of the unselected icon is not the #nonSelected DIV, it's the <label>. Instead of $(elem).parent(), use $(elem).closest("div").

Also, you should probably move the label along with the image.

function moveButton(elem){
    if( $(elem).closest("div").attr("id") == "nonSelected" ){
        $(elem).parent().prependTo('#selected');
    }
    else{
        $(elem).parent().prependTo('#nonSelected'); 
    }
}

Corrected Fiddle

score 0 · Answer 3 · answered Feb 22 '15 at 13:23

HTML Modification

 <label for="blackjack"><img onclick="moveButton(this)" src="http://i.imgur.com/kfMWC91.jpg" alt="" data-checked='img/blackjack.gif' data-unchecked='img/blackjack.jpg'>
  <INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]">    </label>

  <label for="chuckaluck"><img onclick="moveButton(this)" src="http://i.imgur.com/AvPEx4i.jpg" alt="" data-checked='img/chuckaluck.gif' data-unchecked='img/chuckaluck.jpg'>
  <INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]"></label>

  <label for="roulette"><img onclick="moveButton(this)" src="http://i.imgur.com/tBEisp3.jpg" alt="" data-checked='img/roulette.gif' data-unchecked='img/roulette.jpg'>
  <INPUT id="roulette" type="checkbox" value="Roulette" name="game[]"></label>

  <label for="stud"><img onclick="moveButton(this)" src="http://i.imgur.com/Oigq8QI.jpg" alt="" data-checked='img/stud.gif' data-unchecked='img/stud.jpg'>
  <INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]"></label>

  <label for="holdem"><img onclick="moveButton(this)" src="http://i.imgur.com/Oc52z68.jpg" alt="" data-checked='img/holdem.gif' data-unchecked='img/holdem.jpg'>
  <INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]"></label>

  <label for="boule"><img onclick="moveButton(this)" src="http://i.imgur.com/XFsfu7S.jpg" alt="" data-checked='img/boule.gif' data-unchecked='img/boule.jpg'>
  <INPUT id="boule" type="checkbox" value="La Boule" name="game[]"></label>

Javascript

function moveButton(elem){
    if( $(elem).parent().parent().attr("id") == "nonSelected" ){
        $(elem).detach().prependTo('#selected');
    }
    else{
        $(elem).detach().prependTo('#nonSelected'); 
    }
}

PrependTo() bug

3 Answers3