jquery更新<输入名称=[i]>如果DOM被改变

jquery update <input name = [i]> if DOM is changed

本文关键字：gt 如果 DOM 改变 lt 更新 输入 jquery      更新时间：2023-09-26

我是jQuery的新手，如果你能帮我解决一个问题，我将不胜感激。

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

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

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

问题是，当我删除一个文本框时，值就被删除了（就像i-）。旧值不会更新。在我的帖子中，我只从"有序"的文本框中获得值，即如果像一样跳过了文本框值

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

它不会被退回。（在这种情况下，我将只返回值name1和[2]）。

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

这是我的javascript代码：

$（函数（）{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;
}); });

这是小提琴：

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

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

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

我感觉你希望至少有一个学生，所以我会在标记中放一个：

<div id="container">
    <div id="TextBoxesGroup"> <span>
        Press to add textbox and remove button    
         </span>
    </div>
    <p class="students">
        <label>Name:
            <input type="text" class="text-box single-line" size="20" placeholder="Student name..."
            />
        </label>
        <button class="removeStudent">Remove</button>
    </p>
    <input type='button' value="Add more Students" id="addButton"  />
</div>

然后，我会简单地操作它来添加更多：（详细显示步骤等，可以合并一点）

$(function () {
    var scntDiv = $('#TextBoxesGroup');
    $('#addButton').click(function () {
        var lastStudent= $(".students").last();
        var newName =  lastStudent.clone();
        newName.find('.single-line.text-box').val("new student");
        lastStudent.after(newName);
    });
    $('#container').on('click', '.removeStudent', function () {
        if ($('.students').length > 1) {
            $(this).parents('p').remove();
        }
    });
});

这会克隆最后一个，将其插入最后一个之后，并始终保留至少一个学生，并允许删除其中的任何一个。否则，我会研究Darin提供的答案。

相关文章：