CODEWITHSUNDEEP
javascriptjqueryappenddetach
Kate A.
Kate A.

Reputation: 67

Detach then Append Div

I have been working with this script and its mind boggling as it looks as though it should work correctly, however it is not. So I turn to you all for an extra set of eyes on what I am missing.

Situation: Basically, what I am trying to do is on click detach a div, then when another radio button is selected, append the div back to its position.

I have included a JSFiddle so you can see that I may not be entirely off track : http://jsfiddle.net/heykate/pusk6ezx/

On load, the user is presented with two options, Support or Inflatable with the default size selected on the support size with the other models sizes hidden. Which is fine. I know ultimately I want to change that first line of code from hide() to detach().

Once I go to click on the second style option, it shows the second models widths like it is supposed to, however if I was to switch back to the first style option. The div I originally detached, is still hidden and will not .append() within my code.

Here is what my script looks like:

$(document).ready(function(){
    $('#5e8a1520d82ed2834919fda63f4a3f84').hide();            
    $('input[type="radio"]').change(function(){
             if($(this).attr("value")=="489"){
                $( "#b6304c97422f08727702021e2c6c7cda" ).append( ".rightCol" );
                $("#5e8a1520d82ed2834919fda63f4a3f84").detach();                
              }
             if($(this).attr("value")=="488"){
                $("#b6304c97422f08727702021e2c6c7cda").detach();
                $("#5e8a1520d82ed2834919fda63f4a3f84").show();
            }
        });    
    });

Please let me know what I am missing. Basically the reason I am doing this to begin with is

  1. To make it less confusing on the front end and
  2. because the defaults are set (for both sizes) they get mashed up in the product order info, so if I could clear the other widths checked radio button or detach and prevent it from being seen, I think it would work out just fine.

Upvotes: 0

Views: 2701

Answers (1)

Marc B
Marc B

Reputation: 360772

.detach REMOVES the element from the DOM. Since it's no longer in the DOM, when you try to .show() it later, it's no longer in the dom, and therefore not findable/usable. That's why .detach() returns the node you've removed, in case you want to re-use it:

foo = $('#blahblah').detach(); // 'foo' now contains the detached now

$('#otherplace').attach(foo);  // reinsert the foo element we detached.
        //OR
$('#otherplace').append(foo);

Upvotes: 2

Related Questions