jQuery，动态追加元素时增量id无法获取值

Question

＆＃13;

＆＃13;

var counter = 0;

$(document).ready(function () {
    $("#container").append('<div class="row ' + counter + '"><div class="form-horizontal ' + counter + '"><div class="form-group col-md-12 col-xs-12"><div class="col-md-4 col-xs-6"><input id="txtfname' + counter + '" class="form-control" type="text" placeholder="First Name"></div><div class="col-md-4 col-xs-6"><input id="txtlname' + counter + '" class="form-control" type="text" placeholder="Last Name"></div><div class="col-md-4 col-xs-6"><input id="textaddress' + counter + '" class="form-control" type="text" placeholder="Address"></div></div></div></div>');
    counter++;
    return false;

})

$(document).on('click', '#add', function ()
{
    if(counter > 0){
        var inputName = $('#txtfname' + counter).val();

        debugger;
      //  var ele = $(jQuery.trim('#txtfname'+counter.toString())).val();
      //  var name = inputName.valueOf()

        if (jQuery.trim(inputName).length > 0)
        {
            $(ele).prop('disabled', true);
          
            alert("First name filled");
        }
        else
        {
            alert("Nothing Filled");
        }
}
  
    $("#container").append('<div class="row ' + counter + '"><div class="form-horizontal ' + counter + '"><div class="form-group col-md-12 col-xs-12"><div class="col-md-4 col-xs-6"><input id="txtfname' + counter + '" class="form-control" type="text" placeholder="First Name"></div><div class="col-md-4 col-xs-6"><input id="txtlname' + counter + '" class="form-control" type="text" placeholder="Last Name"></div><div class="col-md-4 col-xs-6"><input id="textaddress' + counter + '" class="form-control" type="text" placeholder="Address"></div></div></div></div>');
    counter++;
    return false;

});

$("#remove").click(function () {
    if (counter == 1) {
        alert("No more author to remove");
        return false;
    }

    counter--;

  //  $(".row" + counter).remove();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
        ></script>
<div id="container">
</div>

<div>      
   <input type="button" id="add" value="Add input Row"/>
   <input type="button" id="remove" value="Remove input Row"/>
  
</div>

＆＃13;

＆＃13;

＆＃13;

我无法使用div函数从val()获取值 例如

var inputName = $('#txtfname' + counter).val(); // inputName= '#txtfname1' 

我想在txtfname字段输入值，但我无法理解 请帮忙

This is my code in html view

var counter = 1;

$(document).on('click', '#add', function ()
{
    if(counter > 0){
        var inputName = $('#txtfname' + counter).val();

        if (jQuery.trim(inputName).length > 0) {
            $(inputName).prop('disabled', true);
            alert("First name filled");
        } else {
           alert("something else");
    }
}

// debugger; 
$("#container").append('<div class="row ' + counter + '"><div class="form-horizontal ' + counter + '"><div class="form-group col-md-12 col-xs-12"><div class="col-md-4 col-xs-6"><input id="txtfname' + counter + '" class="form-control" type="text" placeholder="First Name"></div><div class="col-md-4 col-xs-6"><input id="txtlname' + counter + '" class="form-control" type="text" placeholder="Last Name"></div><div class="col-md-4 col-xs-6"><input id="textaddress' + counter + '" class="form-control" type="text" placeholder="Address"></div></div></div></div>');
    counter++;
    return false;

});

Answer 1

您是否尝试使用浏览器Dom Explorer（开发者工具）来检查您的HTML是否正确生成并且您的输入确实是您想要的ID设置？

Answer 2

您实际上无法使用val()获取div的内容，而是使用text()