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> 

SCRIPT

$(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/