Select2不会在'追加'上运行

时间:2017-09-11 16:51:08

标签: javascript jquery html jquery-select2

Select2函数在附加新的select标签时没有打开,而且控制台有这个错误(Uncaught TypeError:$(...)。select2不是函数)。

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">   </script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js'></script>

$(document).on('click', '#addNewItem', function() {
      var a = $(".gh").val();
      a++;
      $('.asd').append('<select class="form-control select2" name="ProposalItemName[]">' +
        '<optgroup label="Items">' +
        '<option>test</option>' +
        '<option>test</option>' +
        '</optgroup>' +
        '</select>');
      $('.select2').select2();
    });

1 个答案:

答案 0 :(得分:0)

您可以使用解决方案https://jsfiddle.net/cx5m40wu/2/

$(document).on('click', '#addNewItem', function() {
  var a = $(".gh").val();
  a++;
  $('.asd').append(`<select class="form-control select2" name="ProposalItemName[]">
    <optgroup label="Items">
      <option>test</option>
      <option>test</option>
    </optgroup>
  </select>`);
  $('.select2').select2();      
});
       
.alignRight{
  float: right;
  padding-left: 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<div class="asd">
  test
</div>
<button id="addNewItem" type="button">
Click
</button>

我认为代码中的问题是2 jQuery

  

检查JavaScript&amp;的顺序CSS个文件。

我使用过ES6标准(模板文字)

希望这会对你有所帮助。