JQuery Ajax无法正确获取按钮ID值，仅能获取首个ID问题咨询

嘿，我一眼就揪出问题根源了——你页面里的多个编辑按钮都用了同一个id="ed"，但HTML规范里明确要求ID必须是页面唯一的！浏览器只会认第一个带这个ID的元素，所以不管你点哪个按钮，事件都只会绑定到第一个按钮上，自然只能拿到它的ID值。

1. 把按钮的ID改成类名 #

把所有按钮的id="ed"替换成class="ed"，这样多个按钮就能共享同一个标识了，比如：

<button class="ed" value="1">编辑条目1</button>
<button class="ed" value="2">编辑条目2</button>
<button class="ed" value="3">编辑条目3</button>

2. 更新你的jQuery事件绑定代码 #

把事件委托的选择器从#ed改成.ed，这样就能正确匹配所有带ed类的按钮了：

$('#list').on('click','.ed', function(){ 
    var id = $(this).attr("value"); 
    $.ajax({ 
        url: 'template/edit.php?id='+id, 
        type: 'get', 
        data: {ed: id} 
    }) 
    .done(function(fil) { 
        $('#modal').modal('show'); 
        $('#plc_form').html(fil); 
    }) 
    .fail(function() { 
        console.log("error"); 
    }); 
});

如果觉得用value属性存ID有点不直观（毕竟按钮的value本来是给表单提交用的），可以改用HTML5的data-id属性，代码可读性更高：

<button class="ed" data-id="1">编辑条目1</button>

然后在JS里这样获取ID：

var id = $(this).data("id");

以后写HTML一定要记牢：ID是给单个元素独用的，类名才是用来标记一组功能相同的元素的～这样就不会再遇到这种绑定错位的问题啦！

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