Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The <code>change</code> event requires the following three things happen:</p> <ol> <li>Element gain focus</li> <li>Value change</li> <li>Focus blur from element</li> </ol> <p>If you are changing the value of an input programmatically, then you must manually trigger the <code>change</code> event via jQuery's <code>.trigger('change')</code> or the <code>.change()</code> shortcut.</p> <p>Ideally, you would modify the first function to trigger change:</p> <pre><code>$(document).ready(function () { $("input:radio").bind('click', function () { $("#image") .val($(this).val()) .trigger('change'); }); }); $(document).ready(function () { $('#image').bind('change', function () { var src = $(this).val(); $('#imagePreview').html(src ? '&lt;img src="' + src + '"&gt;' : ''); }); }); </code></pre> <p>However, per your question text, you cannot change the first function as I have suggested. This being the case, there is no good option for you, IMO. You could set up a timing interval to poll the input for its value and trigger the <code>change</code> event if you notice that it is different from the last check, but that's just ugly. Regardless, you need to cause the change event to fire.</p> <p>Ugly:</p> <pre><code>//LEAVE FIRST FUNCTION ALONE $(document).ready(function () { var $imageInput = $("#image"), $imagePreview = $('#imagePreview'), lastVal; $imageInput.bind('change', function () { var src = $(this).val(); $imagePreview.html(src ? '&lt;img src="' + src + '"&gt;' : ''); }); lastVal = $imageInput.val(); setInterval(function () { var currentVal = $imageInput.val(); if (currentVal !== lastVal) { $imageInput.trigger('change'); lastVal = currentVal; } }, 500); }); </code></pre>
 

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