javascript - 将点击事件添加到动态添加的按钮到剑道窗口内容

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 会监听 #window 元素内的 dom 结构的任何更改，因此您可以选择任何动态创建的元素。