Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is a rather interesting find. I'll do a bit more research to determine whether or not I can identify a more root cause, but for the time being I have a couple suggestions.</p> <h3>Nest Your Input</h3> <pre><code>&lt;label&gt; &lt;input /&gt; &lt;img /&gt; &lt;/label&gt; </code></pre> <p>This is a common convention used for associating inputs with labels. Given the input and the label are both inline, this doesn't affect the actual layout necessarily.</p> <h3>JavaScript Patch</h3> <p>Another option is to perform a click on the corresponding input when one didn't happen naturally. In this approach we setup a timeout to click after 100ms. Any click that happens otherwise will clear our timeout:</p> <pre><code>$("label[for]").each(function () { var timeout; var element = $("#" + $(this).attr("for")); $(this).on("click", function () { timeout = setTimeout(function () { element.click(); }, 100); }); element.on("click", function () { clearTimeout(timeout); }); }); </code></pre> <p>Browsers that already work will clear the timeout, preventing a second click. Internet Explorer 11 will click via the timeout.</p> <p>Demo: <a href="http://jsfiddle.net/CG9XU/" rel="nofollow">http://jsfiddle.net/CG9XU/</a></p> <p>One caveat is that that solution only works for labels that were on the page when the case was ran. If you have forms coming in late (perhaps via ajax), you'll need to listen higher up on the DOM. The below example listens on the <code>document</code> level:</p> <pre><code>$(document).on("click", "label[for]", function () { var timeout; var element = $("#" + $(this).attr("for")); timeout = setTimeout(function () { element.click(); }, 100); element.one("click", function () { clearTimeout(timeout); }); }); </code></pre> <p>The label element accepts as its content type all phrasing elements, and this includes image elements. I'll keep looking into this, and will update this answer with any insight.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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