My Appended HTML Not Running the Current jQuery Code

Question

So I'm currently working on a dynamic insert form for my website. To achieve that, I'm making a button to append a new textbox which supposed to be using Select2 plugin in it. Once I'm doing with jQuery append() function, the appended code not even read Select2 plugin.

I've tried using AJAX and putting $() in front of the appended code. But nothing works.

This is part of my modal's code.

<div class="block-content">
                    <div class="row">
                        <div class="col-12 d-flex justify-content-end align-content-end">
                            <button id="add-more-btn" class="btn btn-primary"><i class="fa fa-plus"></i>&nbsp; Add More</button>
                        </div>
                    </div>
                    <br />
                    <form method="POST" action="/driver-management/create/vehicle-category">
                    @csrf 
                    <div id="data-pointer" class="row d-none">
                        <div class="col-12">
                        <strong>Data #1</strong>
                        </div>
                    </div>
                    <div id="more-field">
                    <div class="row">
                        <div class="col-12 form-group">
                            <select class="js-select2 form-control" required name="select-category" style="width: 100%;" data-placeholder="Choose one..">
                                <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                    @foreach($vehicle as $data)
                                    <option value="{{ $loop->iteration }}"> {{ $data->vehicle_cat_name }} </option>
                                    @endforeach
                            </select>
                        </div>
                    </div>
                    <br />
                    </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group float-right">
                                    <input type="submit" class="btn btn-outline-primary" id="Create" value="Submit">
                                    <button type="button" class="btn btn-outline-danger" data-dismiss="modal" aria-label="Close">Close</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- END Input Grid Sizes -->
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    let count = 0;
    $('#add-more-btn').click(function(e){
        $('#data-pointer').removeClass('d-none');
        $('#more-field').append($('<div id="data-pointer" row="row"> <div class="col-12"> <strong>Data #'+(count+1)+'</strong> </div> </div> <div class="row" id="data"> <div class="col-12 form-group"> <select class="js-select2 form-control" required id="select-category-'+count+'" name="select-category-'+count+'" style="width: 100%;" data-placeholder="Choose one.."> <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin --> @foreach($vehicle as $kendaraan) <option value="{{ $loop->iteration }}"> {{ $kendaraan->vehicle_cat_name }} </option> @endforeach </select> </div> </div> <br /> '));
    });
</script>

If you see on my modal's part, there's some select option that has been embedded with Select2 plugin. I expect the appended code will do exactly the same as the first one. By the way, the plugin has been declared on the main page and nothing wrong with it.

Answer 1

You can destroy select2 before appending using

$(".js-select2").select2('destroy'); //

and after appending reinitialize using

 $('.js-select2').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });

Answer 2

Javascript, and jquery, is applied on object on specific event. Usually plugin like select2 activates on page ready. When you add new object in a page you have to reactivate the plugin. You can do in various way: - Destroy and reinitialize the plugin. Not very elegant but secure - Initialize only on new object. More elegant and quicker

This is the code used to initialize select2 at page ready on all select

$(document).ready(function() {
    $('select').select2();
});

You have to call select2 when your append stop with something like this:

$('#data-pointer select').select2();

NB adding new object with same ID is not a good practice.