如何將jquery氣泡腳本應用於動態填充數據？

Question

我在網上發現了這個很棒的jquery氣泡腳本 - http://jqueryfordesigners.com/coda-popup-bubbles/ - 我想將相同的腳本應用於多個項目。唯一的事情是jQuery腳本只適用於一個項目。

下面是腳本：

$(function() { 
    $('.bubbleInfo').each(function() { 
     var distance = 10; 
     var time = 250; 
     var hideDelay = 500; 

     var hideDelayTimer = null; 

     var beingShown = false; 
     var shown = false; 
     var trigger = $('.trigger', this); 
     var info = $('.popup', this).css('opacity', 0); 


     $([trigger.get(0), info.get(0)]).mouseover(function() { 
      if (hideDelayTimer) clearTimeout(hideDelayTimer); 
      if (beingShown || shown) { 
       // don't trigger the animation again 
       return; 
      } else { 
       // reset position of info box 
       beingShown = true; 

       info.css({ 
        top: 20, 
        left: 10, 
        display: 'block' 
       }).animate({ 
        top: '-=' + distance + 'px', 
        opacity: 1 
       }, time, 'swing', function() { 
        beingShown = false; 
        shown = true; 
       }); 
      } 

      return false; 
     }).mouseout(function() { 
      if (hideDelayTimer) clearTimeout(hideDelayTimer); 
      hideDelayTimer = setTimeout(function() { 
       hideDelayTimer = null; 
       info.animate({ 
        top: '-=' + distance + 'px', 
        opacity: 0 
       }, time, 'swing', function() { 
        shown = false; 
        info.css('display', 'none'); 
       }); 

      }, hideDelay); 

      return false; 
     }); 
    }); 
}); 

下面是HTML：

<div class="bubbleInfo"> 
    <div> 
     <img src="coda-bubble_files/nav-download.png" class="trigger"> 
    </div> 
    <div class="popup">Content goes here</div> 
</div> 

我希望做的是，動態填充的項目列表中包含 「tigger1」 類，「觸發器2「，」觸發器3「等。另外」popup1「，」彈出2「等使用腳本的多個項目，但我不知道如何去改變或修改腳本。

任何人都可以幫助和建議一個解決方案或替代？

謝謝！

Answer 1

函數將適用於具有bubbleInfo類的元素，並且記住元素可以有多個類，以便

<div id=div1 class="bubbleInfo divs"></div> 

<span id="span1" class="spans "></span> 

<div class="popup bubbleInfo">Content goes here</div> 

都將有行動應用