来自iframe的动态创建元素的事件绑定

Question

在我的应用程序中，添加了将div元素动态附加到其父div元素的代码。我可以使用$('#FrameId').contents().find('#id');访问预定义的iframe div元素。但是当我尝试获取新添加的div元素时，它会显示 undefined 。为什么我无法访问新添加的div元素？

用于追加新的div元素，使用下面的代码：

$('#frameId').contents().find("#id").append("<div class="sample">Some text</div>");

当我尝试获取新添加的div元素时，使用下面的代码：

$('#frameId').contents().find(".sample").click(function(){});

其中，未触发点击事件，因为它无法找到.sample div元素。

Answer 1

您可以使用iframe load活动，请参阅以下示例以获取更多信息。

对于动态创建元素的点击事件，您必须使用on().

创建“委托”绑定

  

委派事件的优势在于它们可以处理来自的事件   稍后添加到文档中的后代元素。

$('#frameId').on('load', function(){
    $(this).contents().find('body').on('click', '.sample', function(e){
       //Do some stuff
    });
});