Question

我有三件事情要发生：

我正在使用此表单发送信息。

<form method="post" id="myForm" action="includes/functions.php">
    <input type="hidden" name="group_id" value="$group_id" />
    <input type="hidden" name="submit_join"/>
    <button class="request" id="sub" name="submit_join">Join</button>
</form>

此jQuery脚本运行PHP脚本。

$("#sub").click(function() {
 $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(){ $("#sub").html("Applied").fadeIn().addClass("applied").removeClass("request"); 
   });
});
$("#myForm").submit(function() {
  return false; 
});

这是PHP脚本的功能。（不是准备好的声明）

if (isset($_POST['submit_join'])) {
  //User ID
  $user_id = $_SESSION['user_id'];
  $group_id = $_POST['group_id'];

  $sql="INSERT INTO group_assoc (user_id, group_id, permission, dateTime) VALUES ('$user_id', '$group_id', 0, now())";
  if (!mysqli_query($connection, $sql)) {
    die('Error: ' . mysqli_error($connection));
  }
}

- 有人点击按钮一次就可以了。

触发jQuery脚本
jQuery脚本触发PHP脚本
PHP完成其工作
jQuery删除类“request”并将类“apply”

问题： 当同一个用户单击另一个按钮（意味着他们刚刚单击的按钮的副本）时，该页面将忽略jQuery脚本并执行通常执行的操作，刷新页面。这是不受欢迎的过程。

为什么有几种形式，以及为什么有几个按钮？我正在为网站中的每个组执行PHP while循环，每个表单都包含一个按钮（Join），允许您加入组并更改使用上面的jQuery脚本在数据库上的值。

问题：如何重新绑定jQuery脚本，以便在单击其他按钮（<button class="request" id="sub" name="submit_join">Join</button>）时，不忽略jQuery脚本？< / p>

Answer 1

问题似乎是你正在使用重复的ID，尝试使用类而不是id

<form method="post" class="myForm" action="includes/functions.php">
    <input type="hidden" name="group_id" value="$group_id" />
    <input type="hidden" name="submit_join" />
    <button class="request" class="sub" name="submit_join">Join</button>
</form>

和

$(document).on('submit', '.myForm', function () {
    return false;
})
$(document).on('submit', '.sub', function () {
    var $form = $(this).closest('form');
    $.post($form.attr("action"),
    $form.serializeArray(), function () {
        $("#sub").html("Applied").fadeIn().addClass("applied").removeClass("request");
    });
})

Answer 2

将事件传递给事件处理程序总是一个好主意，并执行event.preventDefault()以避免浏览器对元素的默认行为。

$("#myForm").submit(function(event) {
  event.preventDefault(); 
});

对于多个表单，您可以使用一个处理程序来处理表单提交。 $('#sub')将仅绑定到页面上的第一个按钮，使用类附加到相同类型的多个仍然效率低下的按钮。这是一个示例：

$('.subbtn').click(function(e){
    var $form = $(this).parents('form'),
        subUrl = $form.attr('action');    

    e.preventDefault();
    $.post(...)  ;  
})

此处理程序应该照顾您的要求。但是，您可以使用附加到表单的公共包装器的单个处理程序（最坏情况“正文”）来提高效率。

Answer 3

就像jagzviruz所说的那样，最好使用submit事件的事件处理程序来阻止页面刷新。此外，请确保您没有任何重复的元素ID。

我的方法是这样的:(未经测试）

<强> HTML

<form method="post" class="myForm" action="includes/functions.php">
<input type="hidden" name="group_id" value="$group_id" />
<input type="hidden" name="submit_join"/>
<button class="request" class="submit" name="submit_join">Join</button>

<强> JS

$(".myForm").each(function() {
    var $form = $(this),
        action = $form.attr('action'),
        $submit = $form.find('.submit');

    $form.submit(function(event) {
        event.preventDefault();

        return false;
    });

    $submit.click(function(event) {
        event.preventDefault();

        $.post(...);
    });
});

这与jagzviruz提出的解决方案几乎相同，但为了清晰起见，我更喜欢在.each()内执行此类操作。

如何在jQuery脚本被调用一次之后重新绑定它？

3 个答案: