循环中点击按钮通过Ajax获取对应行ID的问题

你的问题出在选择器没定位到当前按钮对应的ID元素，直接用$('.getfromhere')会选中页面上所有这个类的元素，所以text()会返回所有ID的拼接结果，html()只取第一个元素的内容。下面给你两种简单的解决方法：

方法一：通过DOM兄弟元素定位 #

利用按钮和ID元素的兄弟关系，在点击事件里用$(this)获取当前点击的按钮，再找到它对应的ID元素：

修改后的JS代码：

$(document).ready(function() {
    $(".actdeact").on('click', function() {
        // 因为ID的span是按钮的前一个兄弟元素，用prev()直接定位
        var id = $(this).prev('.getfromhere').text();
        // 如果后续结构有变化，也可以用siblings()找同层级的ID元素：
        // var id = $(this).siblings('.getfromhere').text();
        alert(id);
    });
});

方法二：用data属性存ID（更推荐） #

把ID直接存在按钮的自定义data属性里，不用遍历DOM，代码更简洁高效：

首先修改模板循环里的按钮代码：

{% for x in mylist %}
   <span class="getfromhere">{{x.id}}</span>
   <span class="btn btn-info actdeact" data-id="{{x.id}}">Deactivate</span>
{% endfor %}

然后JS代码改成这样：

$(document).ready(function() {
    $(".actdeact").on('click', function() {
        var id = $(this).data('id');
        alert(id);
    });
});

这两种方法都能精准拿到当前点击按钮对应的行ID，你可以根据自己的需求选一种用。

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