jQuery-从外部文件加载后修改html

Question

I have some javascript in a .js file that include html code from an external file .htm

After load the html I want to modify the attribute of input text, but I can't do it:

myScript.js

 $(".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(); }); 

index.htm

 <!-- index.htm --> <!-- the first code... --> <input type="hidden" id="rows" name="rows" value="1" /> <div id="rowList"> </div> <script src="path_to/myScript.js"></script> <!-- the end code... --> <!-- end of index.htm --> 

defaultHtmlForRow.htm

 <!-- the file defaultHtmlForRow.htm --> <div class="form-group" id="rowDefault"> <div class="col-sm-1 col-lg-1"> <input type="text" class="form-control" id="priceDefault" name="priceDefault" placeholder="Es: 30.00" value="" /> </div> <div class="col-sm-1 col-lg-1"> <button type="button" class="btn btn-primary plus"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> 

Answer 1

Use classes in stuff you add. I "fake" the get and use a hidden element.

Note your "alert" shows nothing since the appended value is not set, I "fake" that by putting 3 in for a value.

Odd wrap of function in function so I remove that.

 $(".plus").on('click', function() { console.log("adding"); //I read the current number of rows.. // might be better to do var rowsNumber = $('.rowDefault').length; var rowsNumber = $("#rows").val(); //set the progressive number for the new row rowsNumber++; var row = rowsNumber; $("#rows").val(row); //set new value //var row = 1; // we fake this, use hidden HTML instead :) //load the html from a file //$.get("defaultHtmlForRow.htm", function(data) { // $("#rowList").after(data); // }); // fake out using class based markup var clonething = $('.hiddengem').find(".form-group.rowDefault").clone(true); clonething.find('.priceDefault').attr('id', 'priceDefault' + row); clonething.find('.priceDefault').attr('name', 'priceDefault' + row); $("#rowList").append(clonething).show(); console.log($("#rowList").find('.rowDefault').length) // this does not exist so comment it out //#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" //below, I want to verify that it's all correct var newPrice = $("#priceDefault" + row).val(); alert(newPrice); }); 

 .hiddengem { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="hidden" id="rows" name="rows" value="1" /> <div id="rowList"></div> <button class="plus">add one</button> <div class="hiddengem"> <div class="form-group rowDefault"> <div class="col-sm-1 col-lg-1"> <input type="text" class="form-control priceDefault" name="priceDefault" placeholder="Es: 30.00" value="3" /> </div> <div class="col-sm-1 col-lg-1"> <button type="button" class="btn btn-primary plus"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </div> 

Better:

 $(".plus").on('click', function() { var n = 'priceDefault' + $('.rowDefault').length; var clonething = $('.hiddengem').find(".form-group.rowDefault").clone(true); clonething.find('.priceDefault').attr('id', n).attr('name', n); $("#rowList").append(clonething); // verify results console.log($("#rowList").find('.rowDefault').length) }); 

 .hiddengem { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="rowList"></div> <div class="col-sm-1 col-lg-1"> <button type="button" class="btn btn-primary plus"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> </div> <div class="hiddengem"> <div class="form-group rowDefault"> <div class="col-sm-1 col-lg-1"> <input type="text" class="form-control priceDefault" name="priceDefault" placeholder="Es: 30.00" value="" /> </div> </div> </div>