title: jquery - modify html after load from external file
body: <p>I have some javascript in a .js file that include html code from an external file .htm</p>
  
  <p>After load the html I want to modify the attribute of input text, but I can't do it:</p>
  
  <p><strong>myScript.js</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".plus").click(function(){
      function addRow() {
      //I read the current number of rows..
      var rowsNumber = $("#rows").val();
      //set the progressive number for the new row
      rowsNumber++;
      var row = rowsNumber;  
      var row = 1;
     //load the html from a file
      $.get("defaultHtmlForRow.htm", function(data) {
          $("#rowList").after(data);
      });
      //#descriptionDefault is the id of input type text loaded from defaultHtmlForRow.htm
      $("#descriptionDefault").attr('id', 'description'+row ); //i want to rename the id like id="description1"
      //#priceDefault is the id of input type text loaded from defaultHtmlForRow.htm
      $("#priceDefault").attr('id', 'price'+row ); //i want to reename the id like id="price1"
      //the default value for #priceDefault (now, if correct, #price1) is 30.00, this alert will be tell me "30.00" but I see "undefined"
      //below, I want to verify that it's all correct
      var newPrice = $("#price"+row).val();
      alert(newPrice); //tell me "undefined"... like I can't read the attribute and value from defaultHtmlForRow.htm
      }
      addRow();
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>index.htm</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- index.htm --&gt;
  &lt;!-- the first code... --&gt;
  &lt;input type="hidden" id="rows" name="rows" value="1" /&gt;
  &lt;div id="rowList"&gt;
  &lt;/div&gt;
  
  &lt;script src="path_to/myScript.js"&gt;&lt;/script&gt;
  &lt;!-- the end code... --&gt;
  &lt;!-- end of index.htm --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>defaultHtmlForRow.htm</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- the file defaultHtmlForRow.htm --&gt;
  &lt;div class="form-group" id="rowDefault"&gt;
    &lt;div class="col-sm-1 col-lg-1"&gt;
      &lt;input type="text" class="form-control" id="priceDefault" name="priceDefault" placeholder="Es: 30.00" value="" /&gt;  
    &lt;/div&gt;
    &lt;div class="col-sm-1 col-lg-1"&gt;
      &lt;button type="button" class="btn btn-primary plus"&gt;
      &lt;span class="glyphicon glyphicon-plus" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>