StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery dont trigger .change
text
Body
copied!<p>I have 2 functions: the first one will update an input field, and the second one will show an image if the input value is a valid image.</p> <p>I can not merge them into only one function because they are working on separated pages (I have just putted them on one page for the example). Also I can not change the first function!</p> <p>Instead of <code>.change</code> if I use <code>.blur</code> or <code>.focusout</code> I have to click in and out the input box to update the image. How can I get it working without extra clicks?</p> <pre><code><script type="text/javascript"> $(document).ready(function() { $("input:radio").click(function() { $("#image").val($(this).val()); }); }); $(document).ready(function() { $('#image').change(function() { var src = $(this).val(); $('#imagePreview').html(src ? '<img src="' + src + '">' : ''); }); }); </script> <form> <input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br /> <input type="radio" name="name" value="http://www.google.bg/logos/classicplus.png" /> IMG<br /> <input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br /> <input type="radio" name="name" value="http://www.google.bg/logos/classicplus.png" /> IMG<br /> <input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br /> </form> <input id="image" type="text" name="fname" /> <div id="imagePreview"> </div> </code></pre>

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