Question

我尝试使用输入字段向我的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>

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

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

感谢阅读。抱歉我的英语不好:(

Answer 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 />",您正在指定文字和名称。

Answer 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

Answer 3

尝试这样的事情：

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

$li.append($input);

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

Answer 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/

jquery使用输入字段动态添加li

4 个答案: