Question

我正在为我制作的这个小清单网页应用添加ajax。

我通过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() {

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

感谢。

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() {

        });
    });
});

jquery是哪种形式

1 个答案: