title: Getting value of dynamically created input text
body: <p>i have input field and the first one was manually added while the others are created by clicking of a button, i added the same class to all and i want to try to get the value but i couldn't get value for the dynamically created ones</p>
  
  <pre><code>&lt;div class="col-md-4" &gt;
           &lt;div class="dev_spec"&gt;&lt;input type="text" class="form-control list-title-input" &gt;&lt;/div&gt;
           &lt;div class="dev_spec"&gt;&lt;input type="text" class="form-control list-title-input" &gt;&lt;/div&gt;
        &lt;/div&gt;
  &lt;div class="col-md-4" style="padding-left: 0"&gt;
            &lt;div title="add specification" class="btn btn-success add_define_spec float-left"  data-id="1" style="width:40px; height:35px; margin-right: 10px;"&gt;
                &lt;span &gt;&lt;i class="glyphicon glyphicon-plus" &gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div title="upload file" class="btn btn-default upload_define_spec float-left fileUpload" style="width:40px; height:35px;"&gt;
                &lt;span &gt;&lt;i class="glyphicon glyphicon-upload" &gt;&lt;/i&gt;&lt;/span&gt;
                 &lt;input type='file' class='upload specPhoto'&gt;&amp;nbsp;&amp;nbsp;
            &lt;/div&gt;
            &lt;div class='spec-image float-left'&gt;&lt;img src="&lt;?=$img.'usericon.png'?&gt;" alt="specimge"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
  $(document).on('click','.add_define_spec',function(){
  
         var define_spec_div = $(
           '&lt;div class="define_spec"&gt;'+
             '&lt;div class="col-md-12 invisible-divider-20"&gt;&lt;/div&gt;'+
          '&lt;div class="col-md-3" &gt;&lt;/div&gt;'+
          '&lt;div class="col-md-4 " &gt;'+
            '&lt;div class="dev_spec"&gt;&lt;input type="text" class="form-control list-title-input"&gt;&lt;/div&gt;'+
          '&lt;/div&gt;'+
          '&lt;div class="col-md-4" style="padding-left: 0"&gt;'+
              '&lt;div title="add specification" class="btn btn-success add_define_spec float-left"  data-id="" style="width:40px; height:35px; margin-right: 10px;"&gt;'+
                  '&lt;span &gt;&lt;i class="glyphicon glyphicon-plus" &gt;&lt;/i&gt;&lt;/span&gt;'+
              '&lt;/div&gt;'+
              '&lt;div title="upload file" class="btn btn-default upload_define_spec float-left fileUpload" style="width:40px; height:35px; "&gt;'+
                '&lt;span &gt;&lt;i class="glyphicon glyphicon-upload" &gt;&lt;/i&gt;&lt;/span&gt;'+
                "&lt;input type='file' class='upload specPhoto'&gt;&amp;nbsp;&amp;nbsp;"+
              '&lt;/div&gt;'+
              "&lt;div class='spec-image float-left'&gt;&lt;img src='"+\$imgUrl+'usericon.png'+"' alt='specimge'&gt;&lt;/div&gt;"+
              '&lt;div title="remove specification" class="btn btn-danger remove_define_spec float-left" data-id="2" style="width:40px; height:35px; margin-right: 10px; margin-left: 10px;"&gt;'+
                '&lt;span &gt;&lt;i class="glyphicon glyphicon-minus" &gt;&lt;/i&gt;&lt;/span&gt;'+
              '&lt;/div&gt;'+
  
          '&lt;/div&gt;'+
         '&lt;/div&gt;');
         $(".define_spec_container").append(define_spec_div);
    });
  
  $('.dev_spec :input').on('focus', function(event) {      
          }).on('blur', function(event) { 
             //id = $(this).attr('data-id');
           val = $(this).val();
             console.log(val); return;
  
          });
  </code></pre>
  
  <p>please anybody can help me on this thanks so much</p>