title: jQuery attaches only to Existing objects
body: <p>I am trying to create a button that onclick adds some new <code>html</code> elements to page but <code>jQuery</code> doesn't attach to does new objects. </p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function(){
      jQuery("input[type='button']").click(function(){
          var ask=confirm('Are you sure');
          if(ask){
              var n=jQuery(this).parent();
              var s=jQuery(this).prop('id');
              n.html('Select Picture: &lt;br&gt;&lt;input type="file" name="'+s+'" id="'+s+'" required&gt;');
              }
          }
      });
      jQuery(":file").change(function() {
          var na=jQuery(this).val();
          alert(na);
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>now here is a <code>form</code> Example for that code:</p>
  
  <pre><code>&lt;form&gt;
              &lt;div&gt;&lt;img src="image/source"&gt;&lt;br&gt;
              &lt;input type="checkbox" required value="1" name="product1"&gt;image is ok&lt;br&gt;
              &lt;input type="button" value="change image" id="product1" name="product1b"&gt;&lt;/div&gt;
  &lt;input type="file" name="product2"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So when I click on <code>button</code> the <code>form</code> changes to this:</p>
  
  <pre><code>&lt;form&gt;
  &lt;div&gt;
  Select Picture: &lt;br&gt;
  &lt;input type="file" name="product1" id="product1" required&gt;
  &lt;/div&gt;
  &lt;input type="file" name="product2"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>the problem is that jQuery function <code>jQuery(":file").change(function() {</code> works for <code>product2</code> but not for <code>product1</code>, because it was not there on page load and <code>jQuery</code> is not attached to it.</p>