Добавить событие клика к динамически добавленной кнопке к содержимому окна кендо

Question

У меня есть окно кендо, и я добавляю контент динамически в окно кендо. У содержания есть кнопка, и я хотел прикрепить событие нажатия на эту кнопку. jQuery может найти кнопку по содержимому, прикрепить событие клика, однако событие щелчка никогда не срабатывает

JSFiddle

Html

<div id="example">
  <div id="window">     
   </div> 
</div>

JQuery

          $(document).ready(function() {                 
                    // in reality this contnet will be returned from ajax call
                    var dynamicContent  ="<div><button id='btn' type='button'>Click Me</button></div>"
                    var myWindow = $("#window")
                    var button = $(dynamicContent).find("#btn");

                    // show number of buttons found.                    
                    alert("found " + button.length + " button")

                    // attach click event to button
                                        button.click(function(){
                      alert("this is test");                      
                    })

                    myWindow.kendoWindow({
                        width: "600px",
                        height:"200px",
                        title: "My Window"
                    }).data("kendoWindow").center().open().content(dynamicContent);
                });

Answer 1

Вам нужно изменить:

button.click(function(){
  alert("this is test");                      
})

в

$('#window').on('click', 'button', function(){
  alert("this is test");                      
})

Как вы упомянули, элемент создается динамически, поэтому он не является частью структуры dom браузеров и, следовательно, не может быть выбран с помощью jQuery. Используя приведенный выше код, jQuery прослушивает любые изменения в структуре dom внутри #window элемент, так что вы можете выбрать любые динамически созданные элементы.