仅使用其中一个按钮的 AJAX 脚本

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 也是如此。并将您的 jQuery 更改为绑定到 $('.upvote-form') 和 $('.downvote-form')。

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