KendoUI - 不适用于动态添加的元素

Question

$(document).ready(function() {
  $("select").kendoDropDownList();

});

$( document ).on( "click", "#new", function(){
  $("#container").append('<select><option>New option</option><option>New option 2</option><option>New option 3</option></select>');
});

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>


<div id="container">
  <select>
    <option>lorem ipsum</option>
    <option>lorem ipsum</option>
    <option>lorem ipsum</option>
  </select>
</div>

<a href="#" id="new">Add More</a>

我是 jQuery 和 KendoUI

的新手

如果我直接对元素使用 KendoUI 代码，它就可以工作。但是如果我动态创建元素并尝试应用，它就不起作用...

请帮忙！

ONLINE DEMO

HTML

<div id="container">
  <select>
    <option>lorem ipsum</option>
    <option>lorem ipsum</option>
    <option>lorem ipsum</option>
  </select>
</div>

<a href="#" id="new">Add More</a>

脚本

$(document).ready(function() {
  $("select").kendoDropDownList();

});

$( document ).on( "click", "#new", function(){
  $("#container").append('<select><option>New option</option><option>New option 2</option><option>New option 3</option></select>');
});

Answer 1

动态创建元素后，需要将 kendoDropDownList 再次绑定到 select 标签。

$( document ).on( "click", "#new", function(){
  $("#container").append('<select><option>New option</option><option>New option 2</option><option>New option 3</option></select>');
  $("select").kendoDropDownList();
});

http://jsfiddle.net/avz15vsr/3/

KendoUI - 不适用于动态添加的元素

KendoUI - Not working for Dynamically added Elements

jquery

kendo-ui

kendo-dropdown