使用jQuery的Ajax调用处理多个按钮点击事件

Question

以下是我生成的HTML代码。我遇到了一些麻烦，不知道应该用什么jquery代码来在用户点击激活按钮时触发一个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>

虽然我知道我的jquery不起作用，但我有点困惑...任何帮助都将不胜感激。就像我说的，我试图在用户点击激活按钮时向激活控制器发送ajax请求，但我还需要发送同一span中的隐藏数据。

再次感谢任何帮助。

- Mark D

Answer 1

<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>

- Andrew Cooper

---

@Mark D - 如果您喜欢这个答案，请接受它。点击绿色的打勾标志。 - Andrew Cooper

我可以问一下 var button = this; 的意义吗？我没有看到它在方法中的任何其他地方被使用过？ - Austin A

@AustinA 它用于构建用于ajax调用的数据对象。 - Andrew Cooper

Answer 2

$(".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();
        }
    });
});

1. 不需要循环按钮。 $(".button").click(... 会隐式地将处理程序附加到所有具有“button”类的元素。
2. 您需要将上下文分配给变量，以便在$.ajax调用的回调/作用域中可以访问它。
3. 最好使用event.preventDefault()来防止表单提交。
4. 您的遍历是不正确的，并且据我所知没有:next伪选择器。

- karim79

---

从技术上讲，这是行不通的：val()需要替换为attr('id')才能在发布者的HTML标记中起作用。不过你的第1、3和4点都是正确的。 - emfurry

@emfurry - 发现得好。我刚才假设所需的值存储在“value”属性中。谢谢并点赞。 - karim79