Jquery Select2 Make Dynamically

Question

I want to generate Jquery select 2 when clicking a plus button. see below screenshot

the append functionality and removing rows are working perfectly from side.

I am initializing a div with display none for appending HTML.

like below,,,

<div class="newbrndsrs" style="display:none">
    <div class="row">
        <div class="col-md-5" style="margin-bottom: 15px;">
            <div class="form-group">
                <label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Trade/Brand Name</label>
                <div class="col-lg-8 col-sm-8 prepend-icon">
                    <select name="brandfk[]" class="form-control form-white modlfetch" data-placeholder="Trade/Brand Name">
                        <option value=""></option>
                            <?php
                            while($row9=mysql_fetch_assoc($brandfetchAjax)){ ?>
                                <option value="<?php echo $row9['ID'];?>"><?php echo $row9['BrandName'];?></option>
                            <?php } ?>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-5" style="margin-bottom: 15px;">
            <div class="form-group">
                <label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Series Name</label>
                <div class="col-lg-8 col-sm-8">
                    <select name="brand[]" class="form-control form-white slctjpmodelname">
                    </select>
                </div>
            </div>
        </div>
        <span class="btn btn-primary addline"><i class="glyphicon glyphicon-minus"></i></span>
    </div>
</div>

When Clicking the Button plus I am taking the above HTML and bind it to the bottom of the plus button.

  <div class="row apndarea">
                                <div class="col-md-5" style="margin-bottom: 15px;">
                                    <div class="form-group">
                                        <label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Trade/Brand Name</label>
                                        <div class="col-lg-8 col-sm-8 prepend-icon">
                                            <select name="brandfk[]" class="form-control form-white modlfetch" data-placeholder="Trade/Brand Name">
                                                <option value=""></option>
                                                <?php
                                                while($row2=mysql_fetch_assoc($brandfetch)){ ?>
                                                <option value="<?php echo $row2['ID'];?>"><?php echo $row2['BrandName'];?></option>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5" style="margin-bottom: 15px;">
                                    <div class="form-group">
                                        <label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Series Name</label>
                                        <div class="col-lg-8 col-sm-8">
                                            <select name="brand[]" class="form-control form-white slctjpmodelname">
                                                <option value="">Series </option>
                                                <option value="">Series </option>
                                                <option value="">Series </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <span class="btn btn-primary addline"><i class="glyphicon glyphicon-plus"></i></span>
                            </div>

Jquery....

  $(".addline").click(function(){
                var eqtype      = $("select[name=EquipmentTypeID]").val();
                if(eqtype == ""){
                    $("select[name=EquipmentTypeID]").next().show();
                    return false;
                }else{
                    $(".form-error").hide();
                    $(".apndarea").after($(".newbrndsrs").html());
                }

            });

But New Dynamic Select2 Not working....

I cant make click on it...

What is the Issue ?

Answer 1

$(document).on('click',".addline", function(){
                var eqtype      = $("select[name=EquipmentTypeID]").val();
                if(eqtype == ""){
                    $("select[name=EquipmentTypeID]").next().show();
                    return false;
                }else{
                    $(".form-error").hide();
                    $(".apndarea").after($(".newbrndsrs").html());
                }

            });

Click is not binded to dynamically created object, use on

Answer 2

Use Event deligation

 $(document).on('click', ".addline", function () {
            var eqtype = $("select[name=EquipmentTypeID]").val();
            if (eqtype == "") {
                $("select[name=EquipmentTypeID]").next().show();
                return false;
            } else {
                $(".form-error").hide();
                $(".apndarea").after($(".newbrndsrs").html());
            }

        });