jQuery附加到动态创建的元素(我没有创建，iframe)

Question

我使用第三方播放器，该播放器在页面加载后动态创建。

我尝试使用jquery .prepend（）向其添加元素，但什么也不会发生。

初始玩家看起来像：

<div id="player"></div>

一页加载播放器脚本修改播放器，看起来像：

<iframe id="player">
  <div id="play_button"></div>
  <div id="settings_button"></div>
</iframe>

然后插件调用事件" onplayerready"，并且播放器开始播放。之后，我尝试使用这样的代码将<div id="ad_icon">AD</div>添加到Div <div id="settings_button"></div>：

function onPlayerReady(){
    console.log($("#settings_button").length); // returns '0'
    $("#settings_button").prepend("<div id='ad_icon'>AD</div>");
}

但是什么也没有发生。jQuery似乎不存在id=settings_button的div。console.log $("#settings_button").length返回0。我在页面代码中看到了新元素，但jQuery一无所获。

有什么想法如何使用.prepend（）函数在iframe中动态创建的元素（不是由我创建的）？

Answer 1

您应该使用.contents（）访问iframe内部的元素。
因此，代码将是：

$("#player").contents().find("#settings_button").prepend("<div id='ad_icon'>AD</div>");

Answer 2

您需要使用事件委托绑定事件，

当您的元素在运行时添加时，您需要将此事件委托放置，

$(document).on('click', '#settings_button', function(){
          $(this).prepend("<div id='ad_icon'>AD</div>");
});

Answer 3

尝试此代码，

 $(document).ready(function () {
    $('#player').bind('DOMNodeInserted', function (event) {
        $("#settings_button").prepend("<div id='ad_icon'>AD</div>");
    });
});