Jquery Select2 动态生成

Question

我想在单击加号按钮时生成 Jquery select 2。看下面的截图

附加功能和删除行从侧面完美运行。

我正在初始化一个不显示以附加 HTML 的 div。

如下图,,,

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

单击按钮加号时，我将上面的 HTML 绑定到加号按钮的底部。

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

            });

但新的动态 Select2 不起作用....

我无法点击它...

问题是什么？

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

            });

点击未绑定到动态创建的对象，使用on

Answer 2

使用事件委托

 $(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());
            }

        });