Javascript 空输入字段问题

我有一个事件处理程序，可以打包输入框的内容并将其持久化到用户集合：

'click #update_username': function(ev, template){
    ev.preventDefault();

    var username_field = template.$('input[id="username_field"]').val();

    console.log(username_field);

    Meteor.call('updateUsername', this._id, username_field);

}

每个模板实例都渲染到浏览器，如下所示：

我的问题是，我用于将更新发送到服务器的

username\u字段

变量仅为浏览器中模板的第一个实例定义

因此，如果我试图编辑页面上第二个（或第三个…）条目的用户名，我的变量会认为输入字段为空（或者认为它是页面上该输入字段的第一个实例的值），因为从技术上讲，id='username\u field'页面上的第一个输入框为空

我该怎么做

编辑

---

仅当用户单击“编辑”按钮时，才会显示输入框。否则，它们有

display:none

id必须是唯一的，只能有一个具有

id=username\u field

的字段。如果使用模板生成重复元素，则应使用类而不是id来标识字段。然后，当您单击某个元素时，您可以使用

$（this）

来获取单击的元素，并使用jQuery导航功能，如

.closest（）

和

.find（）

来查找相关元素。如果您有多个同名元素，则必须进行一些域遍历以查找特定的元素，否则你会得到第一个实例。您必须遍历DOM并找到与update元素相关的字段，除非您通过元素传递一些数据属性来帮助您找到它。我会使用

event.currentTarget

，然后查找

.closest（'.username\u field

）.val（）`（更改为类别，请参见上述注释）