javascript - jquery update <input name = [i]> 如果 DOM 更改

Question

我是 jQuery 新手，我有一个问题，如果您能帮助我，我将不胜感激。

当用户单击链接时，我生成了一个表单/元素列表(来自数据库)。每个元素都有一个用 jQuery 生成的删除按钮。如果单击该按钮，它会自行删除并删除输入文本框。我还有一个添加新的文本框按钮。此按钮创建一个新的文本框和删除按钮。

我所有的文本框都有一个名称[i] -值；

name[1]  
name[2] 
name[3]
... 
...

问题是，当我删除文本框时，值就被删除了(就像 i--)。旧值不会更新。在我的回帖中，我只从“按顺序”的文本框中获取值，即如果像这样跳过文本框值

name[1]  
name[2]  
name[4] 
name[5]
...

不会被退回。 (在这种情况下，我只会得到值名称 1 和 [2])。

我需要帮助如何构建数组并将所有值存储到数组中。然后更新数组中的所有值。

这是我的 JavaScript 代码:

$(function () { var scntDiv = $('#TextBoxesGroup');

var i = $('#TextBoxesGroup p').size();

$('#addButton').live('click', function () {

• //换行以使其更具可读性

 $('<p>
        <label for="Students_' + i + '__Name">Name: </label>
        <input type="text" class="text-box single-line" id="Students_' + i + '__Name" size="20" name="Students[' + i + '].Name" placeholder="Student name..." /> 
        <button id="remove">Remove</button>
    </p>').appendTo(scntDiv);
    i++;
    return false;
});

$('#remove').live('click', function () {
    if (i >= 0) {
        $(this).parents('p').remove();
        i--;
        var array = $('#TextBoxesGroup p')
        alert(array.length);
    }
    return false;
}); });

这是 fiddle :

• http://jsfiddle.net/6vmMy/1/

Answer 1

我建议您查看 following article它说明了通过使用默认模型绑定(bind)器支持的非顺序索引来实现目标的更好选择。这样，在删除元素时，您就不会在索引中留下漏洞，并且会使您的代码变得更加容易。此外，本文的作者还提供了一个名为 Html.BeginCollectionItem 的不错的自定义 HTML 帮助程序，它允许您隐藏生成正确标记所需的所有管道。

备注:.live() 已在 jQuery 1.9 中删除。您应该使用 .on() 方法。