Dynami c добавленный iframe с Dynami c запись содержимого jquery дескриптор события для элементов содержимого не работает

Question

Я добавил динамический c iframe к документу, готовому через jquery. `

$( document ).ready(function() {


 $("body").append(renderIframe());
  });}

` Хорошо iframe рендерится с помощью этой функции

function renderIframe(){


 return [

  '<div id="mydiv">',
     '<iframe id="frame" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px;display:none"  height="120%" width="120%">',
     '</iframe>',
 '</div>'
  ].join("")

  }

On Ajax вызов записи содержимого iframe `

 var iFrame = $('#frame');
      iFrame.contents().attr('target','_parent');

   var htmlDoc = (new DOMParser()).parseFromString(data, "text/html");

      var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
   iFrameDoc.write( htmlDoc.documentElement.outerHTML);
   iFrameDoc.close();`

И пытается обработать событие как

 $('document').on('load','#frame', function(){
    console.log("frame loaded")
    $(this).contents().find('body').on('click', '#btnClose', function(e){
        e.preventDefault(e);
        alert("link clicked!" );
    });
    });

Answer 1

Здесь есть несколько проблем.

• iFrame.contents().attr('target','_parent'); добавит атрибут target к каждому элементу в DOM. Я не уверен, что вы пытаетесь сделать с этим, но это не очень хорошая идея.
• В любом случае iframe в этой точке пуст, поэтому ничего не произойдет, и строка может быть удалена.
• renderIframe() logi c на самом деле не нуждается в своей собственной функции; он только когда-либо возвращает одну строку и не содержит бизнес-логики c.
• Вам не нужно создавать экземпляр DOMParser для генерации структуры DOM из вашей строки HTML. Просто установите innerHTML внутри iframe напрямую, используя строку, полученную из запроса AJAX
• iframes не запускает событие load, чтобы блок кода никогда не срабатывал. Лучшая идея - просто прикрепить обработчик событий к обратному вызову AJAX после заполнения контента.
• Если вы ожидаете, что контент будет отображаться на странице, вам нужно удалить параметр display: none в CSS.
• В топи c из CSS не помещайте его в атрибут inline style элемента HTML. Используйте внешнюю таблицу стилей.

С учетом всего сказанного попробуйте следующее:

$("body").append(renderIframe());

function renderIframe() {
  return '<div id="mydiv"><iframe id="frame"></iframe></div>';
}

// inside the AJAX callback:
var iFrame = $('#frame');
let data = '<p>Lorem ipsum</p><button id="btnClose">Close</button>'; // AJAX response
var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
iFrameDoc.body.innerHTML = data;

$('#frame').contents().find('body').on('click', '#btnClose', function(e) {
  e.preventDefault(e);
  alert("link clicked!");
});

Обратите внимание, что SO Snippets запрещает iframes, поэтому вот jsFiddle, содержащий рабочий пример .