関数は1回ではなくn + 1回呼び出されます - なぜですか？

Question

jqueryでは、私のページでquote_boxという要素をクリックするとイベントがあります。 quote_boxをクリックすると、ポップアップが表示されます。ポップアップの1つはFacebookアイコンです。 Facebookアイコンをクリックすると、別のイベントに移動します。アイデアは、各見積もりボックスが異なる人物を表しているということです。人の見積もりボックスをクリックすると、Facebookに送信されるのはそのURLの末尾にある人物の名前です。

最初に引用ボックスをクリックしてFacebookアイコンをクリックすると、Facebook機能が一度呼び出されます。ポップアップを閉じて別の引用ボックスをクリックして、Facebookアイコンをもう一度クリックします。 Facebook機能は2回呼び出されます。ポップアップを閉じて、別の引用ボックスをクリックしてから、Facebookアイコンをもう一度クリックします。 Facebookの機能が3回呼び出されました。

これはなぜ起こっているのですか？ここで

は私のコードです：

HTML：

<section class="container"> 
     <div class="one-fourth" id="Abby"> 
     <div class="quote_box"> 
      <div class="person_name quote">Abby McCracken</div> 
      <div class="attribution"><span class="person_age">18,</span> <span class="person_where">Greater Latrobe Senior High School</span></div> 
     </div> 
     <div class="mobile_attribution"><span class="bold">Abby McCracken, 18</span><br/>Greater Latrobe</div> 
     </div> 
     <div class="one-fourth" id="Ahjani"> 
     <div class="quote_box"> 
       <div class="person_name quote">Ahjani Williams</div> 
       <div class="attribution"><span class="person_age">17,</span> <span class="person_where">Aliquippa Senior High School</span></div> 
     </div> 
    ... 
</section> 

<div id="popup_player"> 
    <div id="popup_social"> 
     <i class="fa fa-facebook videoFBlink" aria-hidden="true"></i> 
     <i class="fa fa-times"></i> 
    </div> 

    <video id="person_video" controls playsinline poster="img/mobile_video_still.jpg"> 

    </video> 
</div> 

jqueryの：

$('.quote_box').on('tap', function() { 
     $('.mask').fadeIn(); 
     //get video file name 
     thisID = $(this).parent().attr('id'); 

     //if click facebook icon for this video 
     $('.videoFBlink').on('tap', function() { 
      posttoFB(thisID); 
      return false; 
     }); 


    }); 
function posttoFB(shareFile) { 
     console.log(shareFile); 
     if (shareFile !== undefined) { 
      var shareurl = "https://mywebsite?file=" + shareFile; 
     } else { 
      var shareurl = "https://nmywebsite"; 
     } 
     window.open('https://www.facebook.com/sharer/sharer.php?u='+escape(shareurl)+'&t='+window.location, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); 
    } 

Answer 1

あなたは、複数の "タップ" イベント（1つの内部が2倍になる）

を設定しているためです

$('.quote_box').on('tap', function() { 
    $('.mask').fadeIn(); 
    //get video file name 
    thisID = $(this).parent().attr('id'); 

    //if click facebook icon for this video 
    $('.videoFBlink').off("tap").on('tap', function() { 
     posttoFB(thisID); 
     return false; 
    }); 


}); 

Answer 2

ネストされた偶数tハンドラ。別のイベントの作成をトリガーするイベントを作成しました。現在表示されているオブジェクトなしでイベントハンドラを作成できます。

 var currentID = 0; 

     $('.quote_box').on('tap', function() { 
      $('.mask').fadeIn(); 
      //get video file name 
      currentID = $(this).parent().attr('id'); 
     }); 

    //if click facebook icon for this video 
      $('.videoFBlink').on('tap', function() { 
       posttoFB(currentID); 
       return false; 
      }); 

    function posttoFB(shareFile) { 
      console.log(shareFile); 
      if (shareFile !== undefined) { 
       var shareurl = "https://mywebsite?file=" + shareFile; 
      } else { 
       var shareurl = "https://nmywebsite"; 
      } 
      window.open('https://www.facebook.com/sharer/sharer.php?u='+escape(shareurl)+'&t='+window.location, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); 
     }