javascript - CSS 类在动态添加的选择框中不起作用

Question

我正在通过 jQuery 在按钮 onclick 上动态添加选择框。但是选择框的 CSS 类不起作用。

这是我的代码:

$(document).ready(function () {

    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID
    var x = 1;
    $("#addMore").click(function (e) {
        $(".selectized").addClass("data-md-selectize data-md-selectize-bottom");
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(".more_field").append('<div class="uk-width-large-1-4 uk-width-medium-1-2 abc"  data-uk-grid-margin><div>Railway Station(s)</div><div> </div><select id="select_demo_2" class="selectized" data-md-selectize data-md-selectize-bottom><option value="a">Ambikapur</option><option value="b">Baloda Bazar</option><option value="c">Bhatapara</option><option value="d">Bilaspur</option><option value="e">Champa</option><option value="f">Dalli-Rajhara</option><option value="g">Dhamtari</option><option value="h">Dongargarh</option><option value="i">Durg-Bhilainagar</option><option value="j">Jagdalpur</option></select></div><div class="uk-width-large-1-4 uk-width-medium-1-2"><div>&nbsp; </div><div> &nbsp;</div><select id="select_demo_3" class="selectized" data-md-selectize data-md-selectize-bottom><option value="">Select...</option><option value="a">Agra Cantt. Railway Station (AGC)</option><option value="b">Agra Fort Railway Station (AF)</option></select></div><div class="uk-width-large-1-4 uk-width-medium-1-2"><div> &nbsp;</div><input type="text" class="md-input validate[required]" name="student_username" id="ereq1" placeholder="Distance"/></div><div class="uk-width-large-1-4 uk-width-medium-1-2"><div><div class="uk-form-row"></div></div></div><a href="#" onclick="calcTotal()" class="remove_field uk-icon-remove"></a></div>');
        }
        $(".more_field").on("click", ".remove_field", function (e) { //user click on remove text
            //alert('test');
            $(this).parent('.abc').remove();
            x--;
        })
    });
});

Answer 1

您将在仅添加一个属性后关闭该类:

 <select id="select_demo_3" class="selectized" data-md-selectize data-md-selectize-bottom>

您需要将其更改为包括您要应用的所有三个:

 <select id="select_demo_3" class="selectized data-md-selectize data-md-selectize-bottom">

您在两个选择框上都有同样的问题。

您还需要在您的顶部 div 上更新它:

<div class="uk-width-large-1-4 uk-width-medium-1-2 abc" data-uk-grid-margin>

到

<div class="uk-width-large-1-4 uk-width-medium-1-2 abc data-um-grid-margin">