jquery动态添加li与输入字段答案

【问题标题】：jquery add dynamically li with input filedjquery动态添加li与输入字段
【发布时间】：2013-10-22 02:47:52
【问题描述】：

我正在尝试使用输入字段向我的ul 添加一个 li。

重要的是输入id是动态创建的。

<li>
  <input id="txtMenuElement1" type="text" />
</li>

这是我的功能：

function addNewMenuElement() {
  if ($('#hfCountMenueElemente').val() < 9) {
    i += 1;
    $('#ulMenueElementeHinzufuegen').append($('<li><input />', { type: 'text', id: 'name' + i }, '</li>'));
    $('#hfCountMenueElemente').val(i);
  } else {
    var notification = $find('<%=rnfMaximalMenuElemente.ClientID %>');
    notification.show();
  }
}

如果我这样做，我生成的代码如下所示：

<li>
  <input />
</li>

因此，它忽略了输入字段的属性。

有人知道我是如何以正确的方式做到这一点的吗？

感谢阅读。对不起我的英语不好:(

【问题讨论】：

标签： jquery html asp.net dynamic

【解决方案1】：

试试

var $x = $('<li/>');
var $y = $('<input />', { type: 'text', id: 'name' + i});
$x.append($y);
$("#ulMenueElementeHinzufuegen").append($x);

另一个代码

$("#ulMenueElementeHinzufuegen").append('<li><input type="text" id="name"' + i +"/> </li>");

你的代码有问题

$("#ulMenueElementeHinzufuegen").append($("<li><input />", { type: "text", id: "name" + i}, "</li>"));

$("<li><input />",您正在分配文本和名称。

【讨论】：

【解决方案2】：

这行得通，

i= 0;
function addNewMenuElement() {
        i += 1;
        $("#ulMenueElementeHinzufuegen").append("<li><input type='text'  id= 'name" + i + "'/></li>");
        $('#hfCountMenueElemente').val(i);

}

$('.click-me').click(function(){
       addNewMenuElement();
});

工作小提琴here

【讨论】：

【解决方案3】：

试试这样的：

var $li = $('<li/>'),
    $input = $('<input />', { type: 'text', id: 'name' + i});

$li.append($input);

$("#ulMenueElementeHinzufuegen").append($li);

【讨论】：

【解决方案4】：

这应该可以完成工作。您试图将属性设置为定义不太明确的元素（同时添加li 和input）。也可以定义 input 名称，而不仅仅是它的 id。

function addNewMenuElement() {
    var i = $('#hfCountMenueElemente').prop("value");

    if (i < 9) {
        i++;

        $("#ulMenueElementeHinzufuegen").append($("<li />")).append($("<input />", {
            type: "text",
            id: "name" + i.toString(),
            name: "name" + i.toString()
        }));

        $('#hfCountMenueElemente').prop("value", i);
    } else {
        var notification = $.find("<%=rnfMaximalMenuElemente.ClientID %>");
        notification.show();
    };
}

演示：http://jsfiddle.net/tQfbv/

【讨论】：