Question

我在.js文件中有一些javascript包含来自外部文件的html代码.htm

加载html后我想修改输入文本的属性，但我不能这样做：

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

在您添加的内容中使用类。我“假装”获取并使用隐藏元素。

注意你的“警报”没有显示任何内容，因为未设置附加值，我通过将3加入值来“伪造”。

函数中的函数奇数换行，所以我删除它。

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

更好：

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

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

1 个答案: