如何获得动态添加的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>
JS
$(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号。这对我有效。
名称选择器是错误的。而不是'[name =“item [] 1',它必须是'[name =”item1 []'“。
var $firstField = $clone.find('[name="item1[]"]');
$firstField.id=('area1'+data+'ID');
谢谢你,但现在我得到一个“未定义“ID。 – 2014-11-21 09:01:33
无法更改克隆元素的ID。一旦你改变并尝试获得它的id,它会返回你在html页面上给出的id值,在我的情况下它是null。我打算用append方法创建我的动态表单。 – 2014-11-21 15:45:53
入住这http://*.com/questions/15967372/find-an-element-by-id-within-a-dynamically-added-control – 2014-11-21 08:25:59