2015-09-11 30 views
0

我动态地添加按钮onclick上的选择框通过jQuery。但选择框的CSS类不起作用。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--; 
     }) 
    }); 
}); 
+0

你要绑定一个click事件中的单击事件。 –

+0

我不明白..我在按钮onclick事件 – Nilisha

+0

上追加div我不认为这是导致你的问题,但你也有一个额外的结束div在你的附加HTML。这也会导致你的问题。 –

回答

0

只是添加一个属性后关闭类:

<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 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"> 
+0

我也尝试过这种方式..但它仍然不能正常工作 – Nilisha

+0

而在这个主题中,他们仅以这种方式使用这些类.. – Nilisha

+0

是的..你有没有检查过这个主题... altair .tzdthemes.com – Nilisha