jQuery and Bootstrap 4: .remove() an object and .append() to another object

[WolfShade]

Hello, all,

I've got code in place that, when a select is changed, the select parent will be removed from the containing div it is in and .append() it to another containing div.  That much works like a charm.

However, two things happen when this action is completed.  First, the CSS that was applied to the object contents disappears.  Second, the onChange event handler no longer works.

How can I re-apply the CSS to the contents, and then reinitialize the onChange event handler?

V/r,

^ _ ^

[osgood_]

WolfShade  wrote

Hello, all,

I've got code in place that, when a select is changed, the select parent will be removed from the containing div it is in and .append() it to another containing div.  That much works like a charm.

However, two things happen when this action is completed.  First, the CSS that was applied to the object contents disappears.  Second, the onChange event handler no longer works.

How can I re-apply the CSS to the contents, and then reinitialize the onChange event handler?

V/r,

^ _ ^

2) Because you are dynamically appending the content you have to 'bind' the event hander, something like below:

$('.parent-container').on('change', '.change-me', function(){

DO SOMETHING

}

So the above would equate to the below where the 'select' menu has been dynamically appended to the 'parent-container' div.

<div class="parent-container">

<select class="change-me">

<option value="Red">Red</option>

<option value="Green">Green</option>

<option value="Yellow">Yellow</option>

</select>

</div>

[WolfShade]

Okay.. I _think_ I understand.  Let me wrap my head around this.

I've got the event handler tied to the select, not the containing div.  Does that matter?

So, if I do something like:

<div id="status_0">Unverified
    <div id="topCard_A">
          <select id="current_A" class="selClass"><option value="0">Unverified</option><option value="1">Verified</option><option value="2">Unsubscribe</option></select>
    </div>
    <div id="topCard_B">
          <select id="current_B" class="selClass"><option value="0">Unverified</option><option value="1">Verified</option><option value="2">Unsubscribe</option></select>
    </div>
    <div id="topCard_C">
          <select id="current_C" class="selClass"><option value="0">Unverified</option><option value="1">Verified</option><option value="2">Unsubscribe</option></select>
    </div>
</div>
<div id="status_1">Verified
    <div id="topCard_D">
          <select id="current_D" class="selClass"><option value="0">Unverified</option><option value="1">Verified</option><option value="2">Unsubscribe</option></select>
    </div>
</div>
<div id="status_2">Unsubscribed
    <div id="topCard_E">
          <select id="current_E" class="selClass"><option value="0">Unverified</option><option value="1">Verified</option><option value="2">Unsubscribe</option></select>
    </div>
    <div id="topCard_F">
          <select id="current_F" class="selClass"><option value="0">Unverified</option><option value="1">Verified</option><option value="2">Unsubscribe</option></select>
    </div>
</div>
include jQuery
<script>
    $('[id^="current_"]').on('change','selClass',function(){
        var $thisObj = $(this).attr('id'),
            $thisParent = $('#topCard_' + $thisObj.split('_')[1])
            $thisVal = $(this).val();
        $thisParent.remove();
        $('#status_' + $thisVal).append($thisParent);
        });
</script>

Would that re-bind or reinitialize the event handler?

V/r,

^ _ ^

[osgood_ · Accepted solution]

Just add the additional jQuery below your current jquery:

CURRENT JQUERY

$('[id^="current_"]').on('change', function(){

var $thisObj = $(this).attr('id');

$thisParent = $('#topCard_' + $thisObj.split('_')[1]);

$thisVal = $(this).val();

$thisParent.remove();

$('#status_' + $thisVal).append($thisParent);

});

ADDITIONAL JQUERY

$('body').on('change', '.selClass', function(){

var $thisObj = $(this).attr('id');

$thisParent = $('#topCard_' + $thisObj.split('_')[1]);

$thisVal = $(this).val();

$thisParent.remove();

$('#status_' + $thisVal).append($thisParent);

});

[WolfShade]

Tried per your example.  Same thing.  It will work once for each, then the element that was removed and placed elsewhere no longer has the event handler.

V/r,

^ _ ^

[osgood_]

Can you try the code below. Its working for me - the event handler on the dynamically appended content can be clicked as many time as necessary.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQueryDynamic Event Handler</title>

</head>

<body>

<div id="status_0">Unverified 

<div id="topCard_A"> 

<select id="current_A" class="selClass">

<option value="0">Unverified</option>

<option value="1">Verified</option>

<option value="2">Unsubscribe</option>

</select> 

</div>

<div id="topCard_B"> 

<select id="current_B" class="selClass">

<option value="0">Unverified</option>

<option value="1">Verified</option>

<option value="2">Unsubscribe</option>

</select> 

</div>

<div id="topCard_C"> 

<select id="current_C" class="selClass">

<option value="0">Unverified</option>

<option value="1">Verified</option>

<option value="2">Unsubscribe</option>

</select> 

</div> 

</div>

<div id="status_1">Verified 

<div id="topCard_D"> 

<select id="current_D" class="selClass">

<option value="0">Unverified</option>

<option value="1">Verified</option>

<option value="2">Unsubscribe</option>

</select> 

</div> 

</div>

<div id="status_2">Unsubscribed

<div id="topCard_E"> 

<select id="current_E" class="selClass">

<option value="0">Unverified</option>

<option value="1">Verified</option>

<option value="2">Unsubscribe</option>

</select> 

</div>

<div id="topCard_F"> 

<select id="current_F" class="selClass">

<option value="0">Unverified</option>

<option value="1">Verified</option>

<option value="2">Unsubscribe</option>

</select> 

</div>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script> 

$('[id^="current_"]').on('change', function(){ 

var $thisObj = $(this).attr('id'); 

$thisParent = $('#topCard_' + $thisObj.split('_')[1]);

$thisVal = $(this).val();

$thisParent.remove(); 

$('#status_' + $thisVal).append($thisParent);

});

$('body').on('change', '.selClass', function(){ 

var $thisObj = $(this).attr('id'); 

$thisParent = $('#topCard_' + $thisObj.split('_')[1]);

$thisVal = $(this).val();

$thisParent.remove(); 

$('#status_' + $thisVal).append($thisParent);

});

</script> 

</body>

</html>

[WolfShade]

Hmm..  it works on this internet connected system, but it doesn't work on my internet isolated system (which has a more recent version of FireFox.)  I'll go over my code line by line and compare it with your example to see if I'm missing anything, but I don't think I am.

I'll report back what I find.  Thank you!

V/r,

^ _ ^

[WolfShade]

I was wrong.    I forgot to actually ADD the class 'selClass' to the selects.  **headdesk** **headdesk** **headdesk** **headdesk**

So you got me on the right track as far as the functionality.  Thank you!  Now I just have to do the same for the CSS (the font is slightly larger and the Bootstrap design is not applied when it moves from one container to the other.)

V/r,

^ _ ^

UPDATE:  No, I don't.  I was just appending to the wrong DIV.  I adjusted to the correct DIV, and the CSS is now applying.  FIXED!  Thank you, osgood_.

[osgood_]

WolfShade  wrote

**headdesk** **headdesk** **headdesk** **headdesk**

I think its part of being a developer. It doesnt matter how long you've been doing this nothing ever goes right first time around, even the simplest of errors and oversights can drive one nuts at times, well most times.

You know it can be done, you have done it on many ocassions in the past but the recall just isnt instant - too much information to retain without a lot of trial, error and research.

Glad its working.

[WolfShade]

Yup.. I think I read, somewhere, that if you code something and everything works perfectly the first time you test it, you did something wrong.  I still make rookie mistakes after almost 20 years of coding.  And, I will continue to do so, for as long as I will code.  But I still smack my head into my desk and pull my hair out by the roots, every time I make those mistakes.  Just coz. 

V/r,

^ _ ^