Change Event is not working on input field

Question

I'm trying to debug and find the error, why Change Event is not working on input field. so i have put breakpoint on change event of jquery while debugging but it skip that .i am not able to find why it is not stopping at breakpoint for debugging.

html part which is generated dynamically only a part is shown here.

var p = $('<input type="file" ID="flImage" name="flImage" runat="server" />');
                $("#mainTbl").append(p);

script

 <script type="text/javascript">      
            $(function () {
                var reader = new FileReader();
                var fileName;
                var contentType;
//tried all three trick to envoke change function but not work
                //$('input[name=flImage]').change(function () {
                $("<input type='file' name='flImage' ID='flImage'/>").change(function () {
                //$("input[name=flImage]").on("change", function(){
                    if (typeof (FileReader) != "undefined") {
                        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                        $($(this)[0].files).each(function () {
                            var file = $(this);
                            if (regex.test(file[0].name.toLowerCase())) {
                                fileName = file[0].name;
                                contentType = file[0].type;
                                reader.readAsDataURL(file[0]);
                            } else {
                                alert(file[0].name + " is not a valid image file.");
                                return false;
                            }
                        });
                    } else {
                        alert("This browser does not support HTML5 FileReader.");
                    }
                });    
</script>

After show many advice from comment i'm trying like this to access input element is it ok :div.main main-raised > div#pdfFormInsideL1 > table#mainTbl > tbody >tr>'input[name=flImage] image given below

For dynamic elements, delegate event to closest static container: `$("#mainTbl").on('change', 'input[name=flImage]', function(){...});` https://learn.jquery.com/events/event-delegation/ — A. Wolff, Dec 08 '17 at 09:53
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — LinkinTED, Dec 08 '17 at 09:55
Your selector `$("")` is totally wrong. I think you wanted `$('#flImage')` — Liam, Dec 08 '17 at 10:50
@A.Wolff i update on accessing dynamic elements which will form like this is it fine :div.main main-raised > div#pdfFormInsideL1 > table#mainTbl > tbody >tr>'input[name=flImage] — hari, Dec 08 '17 at 11:26
@A.Wolff Thx it's work "For dynamic elements, delegate event to closest static container". — hari, Dec 11 '17 at 07:30

score 0 · Answer 1 · answered Dec 08 '17 at 09:58

var p = $('<input type="file" ID="flImage" name="flImage" runat="server" />');
                $("#mainTbl").append(p); 
                
                
$(function () {
        var reader = new FileReader();
        var fileName;
        var contentType;

        $("input[name=flImage]").on("change", function(){
            if (typeof (FileReader) != "undefined") {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        fileName = file[0].name;
                        contentType = file[0].type;
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mainTbl"></div>

@LinkinTED Yes, You can also here after click on `Run code snippet` — RAJNIK PATEL, Dec 08 '17 at 10:22
It won't work. When you dynamically add an element, you need event delegation: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — LinkinTED, Dec 08 '17 at 10:24
@LinkinTED i update on accessing dynamic elements which will form like this is it fine :div.main main-raised > div#pdfFormInsideL1 > table#mainTbl > tbody >tr>'input[name=flImage] — hari, Dec 08 '17 at 11:27

Change Event is not working on input field

1 Answers1