jQuery добавляется к динамически создаваемым элементам (которые я не создавал, iframe)

Я использую сторонний плеер, который создается динамически после загрузки страницы.

Я пытаюсь добавить к нему элементы с помощью jQuery .prepend(), но ничего не происходит.

Исходный плеер выглядит так:

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

После загрузки страницы Player Script модифицирует плеер, и он станет выглядеть так:

<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>");
}

но ничего не происходит. Похоже, что div с id=settings_button не существует для jQuery. Console.log $("#settings_button").length возвращает 0. Я вижу новые элементы в коде страницы, но jQuery ничего не возвращает.

Любые идеи, как я могу использовать функцию .prepend() с динамически созданными элементами в iframe (которые были созданы не мной)?


html jquery append prepend
person Kir Mazur    schedule 24.11.2016    source источник
comment
При каком событии вы пытаетесь запустить свой код? Вы уверены, что #settings_button существует в DOM, когда вы его запускаете?   -  person Rory McCrossan    schedule 24.11.2016
comment
где твой prepend код? он выполняется после того, как ваш third-party player изменил div?   -  person bansi    schedule 24.11.2016
comment
Да, я звоню prepend после того, как игрок начинает играть.   -  person Kir Mazur    schedule 24.11.2016
comment
Это в том же контексте документа? например, не установлен внутри iframe?   -  person A. Wolff    schedule 24.11.2016
comment
проверить console.log($("#settings_button").length)   -  person Pranav C Balan    schedule 24.11.2016
comment
Не внутри iframe — я вызываю это в функции js после того, как проигрыватель начинает играть   -  person Kir Mazur    schedule 24.11.2016
comment
@PranavCBalan это 0 ;( Что мне с этим делать?   -  person Kir Mazur    schedule 24.11.2016
comment
Итак, когда вы это называете, элемент не существует. Трудно помочь вам больше, не видя минималистичный образец, воспроизводящий вашу проблему.   -  person A. Wolff    schedule 24.11.2016
comment
@KirMazur: вы можете воспроизвести проблему во фрагменте стека ??   -  person Pranav C Balan    schedule 24.11.2016
comment
Обновлен мой вопрос с большим количеством кода.   -  person Kir Mazur    schedule 24.11.2016
comment
Ребят, может проблема из-за iframe? Плеер основан на iframe и кажется, что я пытаюсь поймать элементы внутри него :(   -  person Kir Mazur    schedule 24.11.2016

Ответы (3)


arrow_upward
1
arrow_downward

Вы должны использовать .contents() для доступа к элементам внутри iframe.
Таким образом, код будет таким:

$("#player").contents().find("#settings_button").prepend("<div id='ad_icon'>AD</div>");
person Smankusors    schedule 24.11.2016
comment
Отлично, ответь! Спасибо! Забыл о .contents(). К сожалению, кадр кросс-происхождения, поэтому я до сих пор не могу получить информацию. Вы знаете какие-то другие варианты? - person Kir Mazur; 24.11.2016
comment
Ну судя по результатам гугла, без изменения настроек браузера к сожалению не обойтись ;_; - person Smankusors; 24.11.2016
comment
возможно, вы захотите прочитать: другой StackOverflow - person Smankusors; 24.11.2016

arrow_upward
0
arrow_downward

Вам нужно связать события, используя делегирование событий,

Поскольку ваши элементы добавляются во время выполнения, вам нужно поместить это делегирование события,

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

arrow_upward
0
arrow_downward

Попробуйте этот код,

 $(document).ready(function () {
    $('#player').bind('DOMNodeInserted', function (event) {
        $("#settings_button").prepend("<div id='ad_icon'>AD</div>");
    });
});
person Vaibhav shetty    schedule 24.11.2016
comment
Это будет добавлять новый div к каждому новому вставленному DOM (независимо от того, что это такое) и, кстати, поскольку он будет вставлять новый узел с использованием метода prepend(), это вызовет ошибку стека (рекурсивная проблема). Я думаю, $('#player').one('DOMNodeInserted', function (event) {...}); исправит это, но использование наблюдателя обычно является плохой практикой. Тем не менее, это наверняка более актуальный ответ, чем два других, которые уже были опубликованы. - person A. Wolff; 24.11.2016