javascript - Interact with iframe on same domain via jQuery -

i want interact iframe loading same domain.

shopify provides called appproxy , allows folks serve content same domain via appproxy. that's i'm doing.

i have shop https://test-4658.myshopify.com when user signs in , views account iframe pops up. shop test , can create account see if you'd like.

the jquery , html below:

var frame = "<div id='fresh-credit' style='position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; padding: 0; z-index: 2147483647; box-sizing: border-box;'>\n" +        "<div style='position: fixed; background-color: rgba(0,0,0,.4); top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box;'></div>\n" +         "<div style='width: 400px; height: 470px; padding: 0px; background: transparent; margin: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;'>\n" +           "<iframe onload=this.style.visibility='visible' allowtransparency='true' style='visibility: visible; width: 100%; height: 100%; border: 0px; background: transparent;' src='https://test-4658.myshopify.com/apps/proxy/credit'></iframe>\n" +         "</div>\n" +     "</div>";  function showmodal(callback){   $(document).ready(function(){     if (document.location.pathname === '/account'){     console.log("now");   $('body').append($.parsehtml(frame));   } }); callback(); } 

that part works great, modal shows perfect. in callback have function, alerts testing:

function getme(){  $(function(){   $("iframe[src='https://test-4658.myshopify.com/apps/proxy/credit']").contents().find("#fresh-credit-button").click(function(){alert("yep worked");});   var button = $("iframe[src='https://test-4658.myshopify.com/apps/proxy/credit']").contents().find("#fresh-credit-button");   console.log("did find button? " + button );   button.click(function(){     console.log("clicked");   }); }); }  showmodal(getme); 

in above code.. console show's found button in iframe, can't click on it. though same domain shop. , if put code console, works!!

$("iframe[src='https://test-4658.myshopify.com/apps/proxy/credit']").contents().find("#fresh-credit-button").click(function(){alert("yep worked");}); 

there other apps on store working this. if click on black tabs @ bottom of page you'll see them.

what doing wrong?

try this, click shorthand function might work.

$("iframe[src='https://test-4658.myshopify.com/apps/proxy/credit']").contents().find("#fresh-credit-button").on( "click", function(){alert("yep worked");});