jqueryajax调用多个按钮单击事件

下面是我生成的html代码。我很难想出什么应该是jquery代码，以便在用户单击activate按钮时触发ajax请求

<span class="vId">
    <input type="hidden" name="id" id="7" />
    <input type="hidden" name="ClientID" id="026CC6D7-34B2-33D5-B551-CA31EB6CE345" />
    <input class="textbox" type="text"   name="key" />
    <input class="button"  type="button" name="Activate" value="Activate" />
</span>
<span class="gc_Name">Bartlett-White</span>             
<span class="vId">
    <input type="hidden" name="id" id="2" />
    <input type="hidden" name="ClientID" id="000214EE-0000-0000-C000-000000000046" />
    <input class="textbox" type="text" name="key" />
    <input class="button" type="button" name="Activate" value="Activate" />
</span>
<span class="gc_Name">Landingham Bends</span>             
<span class="vId">
    <input type="hidden" name="id" id="8" />
    <input type="hidden" name="ClientID" id="049F2CE6-D996-4721-897A-DB15CE9EB73D" />
    <input class="textbox" type="text" name="key" />
    <input class="button" type="button" name="Activate" value="Activate" />
</span>
<span class="gc_Name">Russell River</span>             

巴特利特白
兰丁汉弯
拉塞尔河

我的想法如下：

<script type="text/javascript">
$().ready(function(){
    $.each($(".button")
      .click(function() {
            $.ajax({
                url:  '{site_url}index.php/activate',
                type: 'POST', 
                dataType: 'html',
                data: {
                    key: $(this).sibling(':first'),
                    idclient: $(this).sibling(':first:next'),
                },
                success: function(result) {

                }
            });
        });
    )
});
</script>

$（）.ready（函数（））{
$。每个（$（“.button”）
。单击（函数（）{
$.ajax({
url:“{site_url}index.php/activate”，
键入：“POST”，
数据类型：“html”，
数据：{
键：$（this）.sibling（':first'），
idclient:$（this）.sibling（':first:next'），
},
成功：功能（结果）{
}
});
});
)
});

虽然我知道我的jquery不起作用，但我有点被难住了……任何帮助都将不胜感激。正如我所说的，每当用户单击activate按钮时，我都试图向activate控制器发送一个ajax请求，但是我还需要在相同的范围内发送隐藏数据

再次感谢您的帮助

$(".button").click(function(e) {
    e.preventDefault();
    var that = this;
    $.ajax({
        url: '{site_url}index.php/activate',
        type: 'POST',
        dataType: 'html',
        data: {
            key: $(that).prev().attr('id'),
            idclient: $(that).siblings('[name="clientID"]').attr('id'),
        },
        success: function(result) {
            alert(result);
            $(that).blahblah();
        }
    });
});

不需要在按钮上循环<代码>$（“.button”）。单击（…将隐式地将处理程序附加到具有“button”类的所有元素

您需要将上下文分配给变量，以便在

$.ajax

调用的回调/范围内访问该变量

理想情况下，您应该使用

event.preventDefault（）

您的遍历不正确，据我所知，没有

：next

伪选择器

$（）.ready（函数（））{
$（“.button”）。单击（函数（）{
var按钮=这个；
$.ajax({
url:“{site_url}index.php/activate”，
键入：“POST”，
数据类型：“html”，
数据：{
键：$（按钮）。同级（'[name=“id”]'）。属性（“id”），
idclient:$（按钮）.sibbines（'[name=“ClientId”]'）.attr（“id”），
},
成功：功能（结果）{
}
});
});
});

从技术上讲，这是行不通的：val（）需要替换为attr（'id'）使用海报的HTML标记。您的第1点、第3点和第4点是正确的。@emfurry-好的地方。我刚刚假设所需的值存储在

值
属性中。谢谢和+1。谢谢您的解释，非常有用。@Mark D-如果您喜欢答案，请接受。单击绿色勾号。我可以问什么
var button=this；
？我看不到它在方法中的其他任何地方使用？@AustinA它用于为ajax调用构建数据对象。
<script type="text/javascript">
$().ready(function(){
    $(".button").click(function() {
        var button = this;
        $.ajax({
            url:  '{site_url}index.php/activate',
            type: 'POST', 
            dataType: 'html',
            data: {
                key: $(button).siblings('[name="id"]').attr("id"),
                idclient: $(button).siblings('[name="ClientId"]').attr("id"),
            },
            success: function(result) {

            }
        });
    });
});
</script>