2017-06-16 147 views
-1

在jquery中,當我點擊我的頁面上名爲quote_box的元素時,我有一個事件。如果你點擊quote_box,彈出窗口。彈出窗口中的一件事是Facebook圖標。如果您點擊Facebook圖標,則會轉到其他事件。這個想法是,每個報價框代表一個不同的人。如果你點擊一個人的報價框,那麼發送到Facebook的是一個URL,其末尾有一個人的名字。函數被調用n + 1次而不是一次 - 爲什麼?

會發生什麼情況是,您第一次點擊一個報價框然後點擊Facebook圖標,Facebook功能被調用一次。關閉彈出窗口並點擊另一個報價框,然後再次點擊Facebook圖標。 Facebook功能被調用兩次。關閉彈出窗口並點擊另一個報價框,然後再次點擊Facebook圖標。 Facebook功能被稱爲三次,等等。

有誰能告訴我爲什麼會發生這種情況嗎?

這裏是我的代碼:

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

回答

1

那是因爲你設置多個 「抽頭」 事件(一個內部一倍)

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


}); 
+0

謝謝!而已!只要我被允許,我會盡快將其標記爲答案。 – LauraNMS

+0

很高興提供幫助。乾杯! –

0

你有一個嵌套的偶數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'); 
     } 
相關問題