Funktion wird n + 1 statt einmal aufgerufen - warum?

Question

In jquery habe ich ein Ereignis für, wenn Sie auf ein Element namens quote_box auf meiner Seite klicken. Wenn Sie auf quote_box klicken, wird ein Popup angezeigt. Eines der Dinge auf dem Popup ist ein Facebook-Symbol. Wenn Sie auf das Facebook-Symbol klicken, wechseln Sie zu einem anderen Ereignis. Die Idee ist, dass jede Zitat-Box eine andere Person darstellt. Wenn Sie auf das Anführungsfeld einer Person klicken, wird eine URL mit dem Namen der Person am Ende der Nachricht an Facebook gesendet.

Was passiert, wenn Sie zum ersten Mal auf ein Zitatfeld klicken und dann auf das Facebook-Symbol klicken, wird die Facebook-Funktion einmal aufgerufen. Schließen Sie das Popup und klicken Sie auf ein anderes Zitatfeld. Klicken Sie dann erneut auf das Facebook-Symbol. Die Facebook-Funktion wird zweimal aufgerufen. Sie schließen das Popup und klicken auf ein anderes Zitatfeld und dann erneut auf das Facebook-Symbol. Die Facebook-Funktion wird dreimal aufgerufen usw.

Kann mir jemand sagen, warum das passiert?

Hier ist mein Code:

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

Das ist, weil Sie

mehrere "tap" Ereignisse gesetzt (die Innenseite verdoppelt)

$('.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

Sie haben eine verschachtelte sogar t Handler. Sie haben ein Ereignis erstellt, das die Erstellung eines anderen Ereignisses auslöst. Sie können einen Ereignishandler erstellen, ohne dass das Objekt gerade angezeigt wird. Ich empfehle das Entfernen der Ereignisse wie folgt:

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