Mustache循环生成HTML后，jQuery如何正确获取对应行的idx值？

问题根源 #

你当前的代码里，$('input[name=idx]').val()会直接获取页面中第一个name="idx"的输入框值，所以不管点击哪一个"start alert"按钮，拿到的都是第一条数据的id，自然只会发起alerts/1的请求。

解决方法 #

方法一：通过DOM层级关系定位对应idx

修改点击事件绑定，把当前点击的按钮传入处理函数，然后通过按钮所在的tr找到对应的隐藏输入框：

1. 更新点击事件代码：

$('input[name=alert-start]').on('click', function() { 
    _this.alertStart($(this));
});

2. 修改alertStart函数：

alertStart : function($currentBtn) {
    // 找到当前按钮所在行的idx输入框
    var idx = $currentBtn.closest('tr[name="alerts"]').find('input[name="idx"]').val();

    $.ajax({
        type: 'GET',
        url: '/alerts/'+idx,
    }).done(function() {
        alert('start alert');
    }).fail(function (error) {
        alert(JSON.stringify(error));
    });
},

方法二：用data属性存储id（更简洁）

直接把id绑定在按钮的data-id属性上，省去隐藏输入框的冗余：

1. 更新Mustache模板：

{{#alerts}}
<tr name = "alerts">
    <td><input type="submit" value="start alert" name="alert-start" data-id="{{id}}"/></td>
    <td>ticker : {{ticker}}</td>
    <td>price : {{price}}</td>
</tr>
{{/alerts}}

2. 简化jQuery代码：

$('input[name=alert-start]').on('click', function() { 
    var idx = $(this).data('id');
    $.ajax({
        type: 'GET',
        url: '/alerts/'+idx,
    }).done(function() {
        alert('start alert');
    }).fail(function (error) {
        alert(JSON.stringify(error));
    });
});

这种方式不需要单独维护alertStart函数，直接在点击回调里处理，代码更简洁直观。

内容的提问来源于stack exchange，提问作者YSEO