変更イベントが入力フィールドで機能していません

Question

デバッグしてエラーを検索しようとしていますが、変更イベントが入力フィールドで機能していません。デバッグ時にjqueryの変更イベントにブレークポイントを設定しましたが、デバッグのためにブレークポイントで停止していない理由を見つけることができません。

ここでは、動的に生成されるhtmlパーツのみを示します。

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

スクリプト

<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> 

私は入力要素 にアクセスするには、このようにしようとしているコメントからのショーの多くのアドバイスは、それが

Answer 1

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>

下記OK :div.main main-raised > div#pdfFormInsideL1 > table#mainTbl > tbody >tr>'input[name=flImage] イメージしたら