Databases
StackOverflow2013
Postsdbo
POJQuery click event not working for iframe, in mobile browser
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery click event not working for iframe, in mobile browser
    text
    copied!<p>This is a pretty specific issue I'm having, but I'm out of ideas on how to debug this, or even find out if it will work at all on mobile browsers.</p> <p>I have 2 pages (both on the SAME domain, so I don't have issues with the cross-domain security policy), one is in an iframe inside the other. Since I need to catch clicks on both the parent and the child, I created a div that covers the iframe, and then calls the click method on the child element:</p> <p>Here's a demo code I made:</p> <p>Parent file:</p> <pre><code>&lt;script&gt; $(document).ready(function() { $("#floating_play_button").click(function() { alert("just clicked floating_play_button... will try to click iframe's on click for link2"); $('#slider').contents().find("#link1").click(); }); }); &lt;/script&gt; &lt;div id="floating_play_button" style="cursor:pointer; left: 0px; top:0px; width:100%; height:395px; position:absolute; border:2px solid red;"&gt;&lt;/div&gt; &lt;iframe id="slider" src="slider_test.php" width="957" height="337" frameBorder="1" style="border:2px solid green;" &gt;&lt;/iframe&gt; </code></pre> <p>Child page:</p> <pre><code>&lt;script&gt; $(document).ready(function() { $("#link1").click(function() { alert("#link1 clicked..."); }); }); &lt;/script&gt; &lt;div id="link1"&gt; &lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;br /&gt; &lt;/div&gt; </code></pre> <p>This works fine on all desktop browsers, but not on Chrome for Android (version from July 22 2013) the default Android browser, iPad, nor iPhone.</p> <p>In the child page I tried both of these forms but neither work:</p> <pre><code> $(document).on('click', '#link1', function() { alert("on click activated for link1"); }); $("#link1").click(function() { alert("#link1 clicked..."); }); </code></pre> <p>As an additional note, the selector is fine. I can do things like change the text attributes and similar via jQuery and it works fine. I just can't call the click event.</p> <p>Any tips or pointers?</p> <p>Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload