如何获得动态添加的HTML元素的ID属性？

我将动态字段添加到我的html中。在做这个时，使用克隆。我可以设置动态添加字段的属性，如ID，但是他们返回空ID。如何获得动态添加的HTML元素的ID属性？

如何获得动态添加按钮的ID？

这里是我的代码：

HTML

<div class="row form-group hide" id="items"> 
    <div class="col-sm-3"> 
     <input type="text" name="item1[]" class="form-control input-sm text"> 
    </div> 
    <div class="col-sm-2"> 
     <input type="text" name="item2[]" class="form-control input-sm text"> 
    </div> 
    <div class="col-sm-2"> 
     <input type="text" name="item3[]" class="form-control input-sm text"> 
    </div> 
    <div class="col-sm-2"> 
     <input type="text" name="item4[]" class="form-control input-sm text"> 
    </div> 
    <div class="col-sm-2"> 
     <input type="text" name="item5[]" class="form-control input-sm text"> 
    </div> 
    <div class="col-sm-1"> 
     <button type="button" name="item6[]" class="btn btn-danger delete"><i class="glyphicon glyphicon-remove"></i></button> 
    </div> 
</div> 

<div class="row form-group"> 
    <div class="col-sm-4"> 
     <div class="btn btn-success" id="add"> 
      add new field 
     </div> 
    </div> 
</div>

$(document).ready(function()){ 
$("#add").click(function (e){ 

     $.ajax({ 
      type: "POST", 
      url : "someURLHERE", 
     },"json"); 

     //$fieldIdCount++; 

     var $template = $('#items'); 
     var $clone = $template.clone().removeClass('hide').removeAttr('id').insertBefore($template); 

     $.get("myPhpURL", function(data){ 

     var $firstField = $clone.find('[name="item[]1"]'); 
     $firstField.id=('area1'+data+'ID'); 
     var $secondField = $clone.find('[name="item[]2"]'); 
     $secondField.id=('area2'+data+'ID'); 
     var $thirdField = $clone.find('[name="item[]3"]'); 
     $thirdField.id =('area3'+data+'ID'); 
     var $fourthField = $clone.find('[name="item[]4"]'); 
     $fourthField.id =('area4'+data+'ID'); 
     var $fifthField = $clone.find('[name="item[]5"]'); 
     $fifthField.id=('area5'+data+'ID'); 
     var $removeButtonFieldID = $clone.find('[name="item[]6"]'); 
     $removeButtonFieldID.id=('removeFieldsButton'+data+'ID'); 

     alert($removeButtonFieldID.id.toString()); 
     },"json"); 

    }); 
} 

$("body").on("click", ".delete", function(event){ 

    alert(jQuery(this).attr("id")); 

    $.ajax({ 
       type: "POST", 
       url : "anotherURLHERE" 
      },"json"); 

    $(this).parent("div").prev('div').remove(); 
    $(this).parent("div").prev('div').remove(); 
    $(this).parent("div").prev('div').remove(); 
    $(this).parent("div").prev('div').remove(); 
    $(this).parent("div").prev('div').remove(); 
    $(this).parent("div").parent('div').remove(); 
});

这里的问题是： alert(jQuery(this).attr("id")); 被返回null。

我知道我是克隆相同的元素，并呼吁他们回来从相同的名称，如

var $firstField = $clone.find('[name="item[]1"]');

，使我不能让这些字段的值。

我是新来的，我需要动态添加这些字段并获得他们新创建的ID号码。

在此先感谢。

--------------更新-------------------

您可以更改clonned元素的id号，但是当涉及在你的js文件的另一部分使用它们的id值时，它总是返回默认的父id。

所以，这种情况的解决方案是使用append（）方法一次，来生成并使用动态添加的html元素的ID号。这对我有效。

来源

2014-11-21 blankBird_

入住这http://stackoverflow.com/questions/15967372/find-an-element-by-id-within-a-dynamically-added-control – 2014-11-21 08:25:59

名称选择器是错误的。而不是'[name =“item [] 1'，它必须是'[name =”item1 []'“。

var $firstField = $clone.find('[name="item1[]"]'); 
$firstField.id=('area1'+data+'ID');

来源

2014-11-21 08:31:50 RGS

谢谢你，但现在我得到一个“未定义“ID。 – 2014-11-21 09:01:33

无法更改克隆元素的ID。一旦你改变并尝试获得它的id，它会返回你在html页面上给出的id值，在我的情况下它是null。我打算用append方法创建我的动态表单。 – 2014-11-21 15:45:53

如何获得动态添加的HTML元素的ID属性？

回答

相关问题