0

Bind an iframe with on method in jquery.

I am using jquery mobile lib with an iframe in page.

$(frame).contents().on('tap', 'div', function() { console.info('sucess')} )}

How to bind the iframe with on method?

Here I tried to get tap function bind to iframe contents with on method. 

//Structure of HTML page

<div  data-role="page" id="test" tabindex="0" class="ui-page ui-body-c" style="min-height: 491px;">
    <iframe height="491" frameborder="0" width="100%" src="about:blank" name="test">
        // ...
        <div id="one" data-role="page">
            <div data-role="content">
                // Contents
            </div>
        </div>
        // ...
    </iframe>
</div>

The click method $(frame).contents().click(function(e) { alert('sucess'); }) will work. But when it comes with mobile device click method doesn't works...

Justin John
  • 9,223
  • 14
  • 70
  • 129

2 Answers2

0

I would try to set an ID to the iFrame and bind on it like this :

$('#iFrameId).on('tap', 'div', function() { console.info('sucess'); });

Remember that you NEED to create your event binding in the script included in the first page loaded with JQuery mobile. By design, all JS scripts included in other files loaded later are ignored.

sdespont
  • 13,915
  • 9
  • 56
  • 97
  • Thanks for response. But It didn't works, I have my script in first page itself. This will work with **click** like below `$(frame).contents().click(function(e) { alert('sucess'); })`. But when it comes with mobile device **click** method doesn't works... – Justin John Feb 21 '13 at 08:07
0

jsbin

you need attach the handler to iframe's contentDocument:

$($frame[0].contentDocument).on('click', '#tap', function(){
    alert('success');
});
anhulife
  • 566
  • 2
  • 7