0

I am trying to add a click event to one of the element which is nested inside of a iframe of iframe.

this is a iframe .ssueContentIframe under this, there is another iframe added as #SmartReportTabContent1 so inside of the second iframe element, I am trying to add a click event like this:

Basically, I don't know when both of iframe will be loaded and all elements will available, for future I am adding:

$('.ssueContentIframe').contents().find( '#SmartReportTabContent1' ).find('.ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ui-grid-row-selected').on('click', function(){
             alert('Hi');
         });

But not working. what is the correct way to wait until both of iframe exist and add the click event to one of the element here?

Thanks in advance!

3gwebtrain
  • 14,640
  • 25
  • 121
  • 247

2 Answers2

0

You need to use "contents" on the second iframe as well. to wait for it to load, you can use the "ready" event on the second iframe.

eg:

$("#SmartReportTabContent1").find("iframe").ready(function (){
    // do something once the iframe is loaded
});

Update

refer to this question

Community
  • 1
  • 1
Stormhashe
  • 704
  • 6
  • 16
  • can i use this inside of `onDocumentReady` - ? first iframe class name is `ssueContentIframe`, inside i am getting second iframe as `#SmartReportTabContent1` – 3gwebtrain Sep 27 '16 at 14:07
  • so just use SmartReportTabContent1 as your iframe container – Stormhashe Sep 27 '16 at 14:09
  • I tried like this: `$(document).ready(function(){ $( '#SmartReportTabContent1' ).ready(function(){ console.log('i am ready' ); }); });` But on ready function itself i am getting consoled. ( at the time here is no iframe at all ) – 3gwebtrain Sep 27 '16 at 14:12
  • `ready` pseudo jq event is for `document` only, not any other DOM element – A. Wolff Sep 27 '16 at 14:15
  • refer to this question: http://stackoverflow.com/questions/17436881/making-script-wait-until-iframe-has-loaded-before-running – Stormhashe Sep 27 '16 at 14:15
0

Well I edit this, first do a load of the first iframe and check it loaded well, then do the function on click on the element.

$(function(){
    $('#foo1').load(function(){
        alert("Loaded");
            $('#foo1').contents().find('iframe').contents().find('#test').on('click', function(event) {
                alert("Working");
            });
    });
});

I tested it on my computer and worked perfectly, remember addind the library, if you don't add a library it won't work.

Just change the ID i used to your IDs.

grec0o
  • 100
  • 1
  • 6
  • I tried, but not working. may be I am wrong here. one thing is, after loading `ssueContentIframe` I am clicking on a link. that link loads the another iframe here. in side of the new one, I am trying to add the event – 3gwebtrain Sep 27 '16 at 14:22
  • further more info is, content loading through `angular`- `ng-view` - – 3gwebtrain Sep 27 '16 at 14:44