jQueryは複数のリクエストを避けます

Question

複数の提出を防ぐ方法が必要です。

$("#myDiv").click(function(e) {
    e.preventDefault();
    console.log('open');

    // submit the form    
    $('#myDiv #myInput').click(function(e){
        e.preventDefault();
        /* ajax call here */
        console.log('clicked');
    });

});

クリックすると #myDiv XタイムのクリックをChild機能に送信しています。

例えば。 3回クリックすると #myDiv そして、クリックします #myInput フォームの3倍を送信し、再び押すと6が送信されます。

それを修正する方法はありますか？

Answer 1

あなたは何度もクリックイベントハンドラーを複数回拘束しているようです $('#myDiv #myInput')..

どちらかを移動する必要があります $('#myDiv #myInput').click(function(e){ のクリックハンドラーの外 $("#myDiv").click(function(e) { または使用します .one(. 。どちらの場合も、動作は異なることに注意してください。

使用する必要もあります event.stoppropagation（）; イベントの泡立ちを止める。

要件に従って、以下のコードを試してください。以下の項目1.および2.は異なって機能するので、要件に従ってコードを理解し、実装してください。

1. #myinputクリックイベントを外で移動します

   $("#myDiv").click(function(e) {
   e.preventDefault();
   e.stopPropagation();
   console.log('open');
   });
   
   // submit the form    
   $('#myDiv #myInput').click(function(e){
      e.preventDefault();
      e.stopPropagation();
      /* ajax call here */
      console.log('clicked');
    });
   

2. #MyInputのクリックハンドラーが1回実行されることに注意してください。

   $("#myDiv").click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      console.log('open');
   
      // submit the form    
      $('#myDiv #myInput').one(function(e){
       e.preventDefault();
       e.stopPropagation();
       /* ajax call here */
       console.log('clicked');
      });
   });