JQuery onchange event will not fire

Question

I'm trying to get this example working: Preview an image before it is uploaded

I simplified the code to:

<script type="text/javascript">
    $("#imgInp").change(function () {
        alert('changed');
    });
</script>

</head>

<body>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>

The problem is the change function on imgInp is not getting triggered. I've tried a million things, but can't get it working. What am I missing?

Thanks...

did you checked console ? are you getting any errors ? – Navin Jun 05 '14 at 09:52 — Navin, Jun 05 '14 at 09:52

score 0 · Answer 1 · answered Jun 05 '14 at 09:43

0

You need to wrap the code in DOM ready:

$(function(){
  $("#imgInp").change(function () {
    alert('changed');
 });
})

answered Jun 05 '14 at 09:43

Milind Anantwar

77,788
22
86
114

score 0 · Accepted Answer · answered Jun 05 '14 at 09:45

0

You need to place it inside document.ready function...

<script type="text/javascript">
$(document).ready(function(){
    $("#imgInp").change(function () {
    alert('changed');
});
});
</script>

answered Jun 05 '14 at 09:45

Illaya

646
6
14

score 0 · Answer 3 · answered Jun 05 '14 at 09:55

0

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).on("change","#imgInp",function(){
        alert('changed');
    });

    </script>

answered Jun 05 '14 at 09:55

Asif Mahamud

573
2
10

That is unnecessary use of event delegation. You should only use it when elements are added dynamically. – Milind Anantwar Jun 05 '14 at 09:57

JQuery onchange event will not fire

3 Answers3