JS & jQuery скрипт внутри функции iframe как будто от родителя html

Question

Код ниже находится в скрипте, который был загружен в iframe #contframe source html. Кнопка находится внутри iframe.

Почему это работает только тогда, когда я ссылаюсь на функцию, как если бы она исходила от родителя HTML?

Например, работает приведенный ниже код:

$(document).ready(function() {
  var kuf = $('#contframe').contents().find('#zbtn');
  kuf.click(function() {
    alert("hello");  
  });
});

Однако приведенная ниже функция вообще не работает:

$(document).ready(function() {
  $('#zbtn').click(function() {
    alert("oi");
  });
});

Answer 1

Я полностью добавлял свои сценарии; Я считаю, что использование do c .createElement устранило проблему.

Следующее решило мою проблему - некоторые незначительные правки от Андрея Ф. { ссылка }

//CREATES NEW JS & CSS TAGS RESPECTIVELY
function insertScript(doc, target, src, callback) {
var insertjs = doc.createElement("script");
insertjs.type = "text/javascript";
insertjs.src = src;
target.appendChild(insertjs);
}
function insertCss(doc, target, href, callback) {
var insertcss = doc.createElement("link");
insertcss.type = "text/css";
insertcss.rel = "stylesheet";
insertcss.href = href;
target.appendChild(insertcss);    
}

//ADDS ABOVE TO IFRAME
$('#contframe').on('load', function(){
var context = this.contentDocument;
var frameHead = context.getElementsByTagName('head').item(0);
insertScript(context, frameHead, '/scripts/jquery.min.js');
insertScript(context, frameHead, '/scripts/content.js');
insertCss(context, frameHead, '/scripts/content.css');
});