如何动态创建具有不同ID的输入元素？

我有使用JavaScript动态生成的输入。但是，我不确定如何向这些人添加ID。让我清楚一点：我需要为每个ID分配不同的ID，我知道如何为它们添加一个ID。如何动态创建具有不同ID的输入元素？

这是我已经试过：

$(document).ready(function() { 
var wrapper   = $(".wayptHolder");  //Fields wrapper 
var add_button  = $(".add_field_button"); //Add button ID 
var x    = 0;      //initial text box count 

//add input element 
$(add_button).click(function(event){   
    event.preventDefault(); 
    if(x < 8){ 

     $(wrapper).append('<div><input type="text", id="waypt"' + x + ' class="form-control added-input", placeholder="Next"><a href="#" class="remove_field">Remove</a></div>');//add inputbox 
     x++; 
    } 
}); 


    $(wrapper).on("click",".remove_field", function(event){ //user click on remove text 
     event.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
});

然而，新的元素，它显示了ID为刚刚waypt。我研究过，它看起来不像JavaScript有字符串插值。例如，Ruby解决了这个问题，可以使用路径＃{x}，以便字符串将x解释为一个变量。 JS如何复制这种行为？

来源

2015-04-28 user3162553

是什么控制台说？ –

使用的逻辑可能以DOM中的重复ID结束 – charlietfl

你的双引号不正确关闭：

$(wrapper).append('<input type="text", id="waypt"' + x + ' class="...

会导致下面的HTML：

<input type="text", id="waypt" 0 class="... 
<input type="text", id="waypt" 1 class="...

显而易见的解决方案是修复行情（和摆脱逗号）：

$(wrapper).append('<input type="text" id="waypt' + x + '" class="...

但是，我会推荐类似于：

var $div = $("<div>"); 
$("<input>", { 
    "type": "text", 
    "id": "waypt" + x, 
    "class": "form-control added-input", 
    "placeholder": "Next" 
}).appendTo($div); 
$("<a></a>", { 
    "href": "#", 
    "class": "remove_field" 
}).text("Remove").appendTo($div); 
$div.appendTo(wrapper);

来源

2015-04-28 19:13:52

谢谢！我需要回顾一下它的基础知识！ – user3162553

不知道我理解正确，但如果生成编号的是你所追求的，试试这个：

var date = new Date(); 
var ticks = date.getTime();

现在蜱会给你一个非常独特的数字，您可以连接到您的ID：

id = "waypt"+ticks;

希望它有助于

来源

2015-04-28 19:22:35 Avi

如何动态创建具有不同ID的输入元素？

回答

相关问题