0

私は3つのことを行っています：

このフォームで情報を送信しています。

<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));
  }
}

-誰かがボタンを 1 回クリックすると、問題なく動作します。

  • jQueryスクリプトをトリガーします
  • jQuery スクリプトが PHP スクリプトをトリガーします。
  • PHPはその仕事をします
  • jQueryはクラス「リクエスト」を削除し、クラス「適用」を配置します

問題: 同じユーザーが別のボタン (クリックしたばかりのボタンの複製) をクリックすると、ページは jQuery スクリプトを無視し、通常どおりにページを更新します。これは望ましくないプロセスです。

なぜ複数のフォームで、なぜ複数のボタンなのか? Web サイトのすべてのグループに対して PHP while ループを実行しています。すべてのフォームには、上記の jQuery スクリプトを使用してグループに参加し、データベースの値を変更できるボタン (参加) が含まれています。

質問:<button class="request" id="sub" name="submit_join">Join</button>別のボタン ( ) がクリックされたときに jQuery スクリプトが無視されないように、jQuery スクリプトを再バインドするにはどうすればよいですか?

4

3 に答える 3

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");
    });
})
于 2013-09-27T03:20:43.820 に答える
0

イベントをイベント ハンドラーに渡しevent.preventDefault()、要素に対するブラウザーの既定の動作を回避することを常にお勧めします。

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

複数のフォームについては、1 つのハンドラーを使用してフォームの送信を処理できます。$('#sub')ページの最初のボタンのみにバインドし、クラスを使用して同じタイプの複数のボタンにアタッチしますが、それでも非効率的です。ここにサンプルがあります：

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

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

このハンドラーは、要件を処理する必要があります。ただし、フォームの共通ラッパー (最悪の場合は「本文」) にアタッチされた単一のハンドラーを使用して、効率を向上させることができます。

于 2013-09-27T03:26:48.693 に答える
0

jagzviruz が言ったように、送信イベントのイベント ハンドラーを使用してページの更新を防ぐことが常に最善です。また、要素 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()明確にするために、このようなことを an 内で行うことを好みます。

于 2013-09-27T05:11:21.990 に答える