Skip to main content
WolfShade
WolfShade
Legend
June 6, 2018
Answered

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

  • June 6, 2018
  • 1 reply
  • 726 views

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,

^ _ ^

    This topic has been closed for replies.
    Correct answer osgood_

    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);

    });

    1 reply

    O
    osgood_
    Legend
    June 6, 2018

    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
    WolfShadeAuthor
    Legend
    June 6, 2018

    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,

    ^ _ ^

    O
    osgood_Correct answer
    Legend
    June 6, 2018

    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);

    });

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices