jquery 哪种形式是

Question

我正在将 ajax 添加到我制作的这个小列表 Web 应用程序中。

我有一个由 php 脚本为列表中的每个项目输出的按钮。当单击其中一项的删除按钮时，我想调用 ajax 使用 php 和 mysql 删除一项。

下面是第 62 项的删除按钮。它有一个隐藏字段，其中包含数据库中列表项的 ID。单击按钮时，我希望调用 jquery click 事件，该事件应发送 ajax 请求以从数据库中删除具有该 id 的项目。

<form class="actions" action="index.php" method="POST">
<input type="hidden" name="idDel" id="62" value="62">
<input type="submit" class="button delete" value="X">
</form>

到目前为止我想到的jquery如下。当单击 .delete 类的按钮(任何删除按钮)时，它需要以某种方式从隐藏字段获取 id 值。

('.delete').click(function(){
              //add click logic here

              var id = $("input.delete").val();

    return false;

    $.ajax({
      type: "POST",
      url: "delete.php",
      data: id,
      success: function() {

现在，我查看了两个类似的问题并尝试了他们的解决方案，但我无法从中找出代码。

1. JQuery - which form was submitted?
2. How can I get the button that caused the submit from the form submit event?

谢谢。

Answer 1

使用$(this)引用被单击的按钮，然后使用.prev()获取按钮之前的元素，这是本例中您想要的输入:

$('.delete').click(function() {
    // Add click logic here

    var id = $(this).prev('input').val();

    return false;

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: id,
        success: function() {

        });
    });
});

<小时/>

您还可以将 ID 存储在按钮本身的 data- 属性中，这意味着更少的 HTML(但您将失去表单的非 JS POST 能力):

HTML:

<form class="actions" action="index.php" method="POST">
   <input type="submit" class="button delete" value="X" data-id="62">
</form>

jQuery:

$('.delete').click(function() {
    // Add click logic here

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

    return false;

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: id,
        success: function() {

        });
    });
});