Question

我正在尝试做什么：制作Upvote和Downvote按钮，使用AJAX发送到处理它的php脚本。

问题：该脚本仅适用于一组按钮。每个项目都有自己的upvote / downvote按钮，但脚本只适用于第一项而不是其余项目。

HTML （每个项目都有自己的div和这些按钮/表单）

        <form id="upvote-form">
            <input name="idea_name" type="hidden" value="test">
            <input name="topic_name" type="hidden" value="test">
            <input name="vote" type="hidden" value="up">
            <input name="submit" id="upvote" type="submit" value="">
        </form>
        <form id="downvote-form">
            <input name="idea_name" type="hidden" value="test">
            <input name="topic_name" type="hidden" value="test">
            <input name="vote" type="hidden" value="down">
            <input name="submit" id="downvote" type="submit" value="">
        </form>

AJAX / Javascript （现在这只是一个测试脚本）

  $(function () {
    $( "#upvote-form" ).on('submit', function (e) {
      $.ajax({
        type: 'post',
        url: 'scripts/vote.php',
        data: $('form').serialize(),
        success: function (data) {
          alert(data);
        }
      });
      e.preventDefault();
    });
  });
  $(function () {
    $( "#downvote-form" ).on('submit', function (e) {
      $.ajax({
        type: 'post',
        url: 'scripts/vote.php',
        data: $('form').serialize(),
        success: function () {
          alert('form was submitted');
        }
      });
      e.preventDefault();
    });
  });

Answer 1

每个div中都有重复的ID。 $（'＃upvote-form'）只会选择id为'upvote-form'的第一个项目，因为id应该是唯一的。将其更改为类而不是id，它将正确附加事件处理程序。

Answer 2

变化：

data: $('form').serialize(),

为：

data: $(this).serialize();

你把两种形式结合起来。由于它们具有重复的名称，因此服务器仅从第一种形式中选择了那些名称。

每组按钮中也有重复的ID。将id="upvote-form"更改为class="upvote-form"，将downvote-form更改为$('.upvote-form')。并将您的jQuery更改为绑定到$('.downvote-form')和{{1}}。

我不知道你是否真的需要提交按钮上的ID。如果它们没有被使用，你应该删除它们，或者将它们更改为类并修复绑定它们的代码。

AJAX脚本只使用其中一个按钮

2 个答案: