title: Get the value from a dynamic input element
body: <p>In a web page we have an input type text:</p>
  
  <pre><code>&lt;input id="bar" type="text" /&gt;
  </code></pre>
  
  <p>I want to insert before another input element before the above element:</p>
  
  <pre><code>var input = $('&lt;input type="text" value="foo" id="ciccia" /&gt;')
  input.insertBefore($('#bar'))
  </code></pre>
  
  <p>And add a simple behavior:</p>
  
  <pre><code>input.on('keyup', function(){
      console.log(input.attr('value'));
  })
  </code></pre>
  
  <p>console.log always get "foo" string</p>
  
  <hr>
  
  <p>If I change</p>
  
  <pre><code> var input = $('&lt;input type="text" value="foo" id="ciccia" /&gt;')
  </code></pre>
  
  <p>to</p>
  
  <pre><code> var input = $('&lt;input type="text" value="bar" id="ciccia" /&gt;')
  </code></pre>
  
  <p>console.log always get "bar" string.</p>
  
  <hr>
  
  <p>What's wrong with DOM? Why I cannot read the real value of text input?</p>