如何獲得動態添加的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屬性？

回答

相關問題