Question

我在我的html中添加了动态字段。在此过程中，使用克隆。我可以设置动态添加的字段属性，例如ID，但它们会返回null 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号。

提前致谢。

-------------- UPDATE -------------------

您可以更改克隆元素的ID号，但是当在js文件的其他部分使用它们的id值时，它总是返回默认的父ID。

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

Answer 1

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

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

如何动态添加HTML元素＆＃39; ID属性？

1 个答案: